'use client';

import React, { useState } from 'react';
import { X, ImageIcon, Film, Video as VideoIcon } from 'lucide-react';
import { SecureImage } from '@/components/common/SecureImage';
import { EmptyState } from '@/components/ui/empty-state';

interface HistoryPanelProps {
    onClose: () => void;
    history?: any[];
    assetHistory?: any[]; // Keep for backward compatibility or rename properly
    onRestore?: (item: any) => void;
    onDelete?: (id: string) => void;
    onHistoryItemClick?: (item: any) => void;
    onContextMenu?: (e: React.MouseEvent, item: any) => void;
}

export const HistoryPanel = ({
    onClose,
    history,
    assetHistory,
    onRestore,
    onDelete,
    onHistoryItemClick,
    onContextMenu
}: HistoryPanelProps) => {
    const [activeHistoryTab, setActiveHistoryTab] = useState<'image' | 'video'>('image');

    const items = history || assetHistory || [];

    const filteredAssets = items.filter(a => {
        const type = String(a.type).toLowerCase();
        if (activeHistoryTab === 'image') return type === 'image' || type.includes('image');
        if (activeHistoryTab === 'video') return type === 'video' || type.includes('video');
        return false;
    });

    return (
        <>
            <div className="p-4 border-b border-white/5 flex flex-col gap-3 bg-white/5">
                <div className="flex justify-between items-center">
                    <button onClick={onClose}><X size={14} className="text-muted-foreground hover:text-white" /></button>
                    <span className="text-xs font-bold uppercase tracking-widest text-foreground/50">历史记录</span>
                </div>
                {/* Tabs */}
                <div className="flex bg-black/20 p-1 rounded-lg">
                    <button 
                        onClick={() => setActiveHistoryTab('image')}
                        className={`flex-1 flex items-center justify-center gap-2 py-1.5 text-[10px] font-bold rounded-md transition-all ${activeHistoryTab === 'image' ? 'bg-white/10 text-foreground shadow-sm' : 'text-muted-foreground hover:text-muted-foreground'}`}
                    >
                        <ImageIcon size={12} /> 图片
                    </button>
                    <button 
                        onClick={() => setActiveHistoryTab('video')}
                        className={`flex-1 flex items-center justify-center gap-2 py-1.5 text-[10px] font-bold rounded-md transition-all ${activeHistoryTab === 'video' ? 'bg-white/10 text-foreground shadow-sm' : 'text-muted-foreground hover:text-muted-foreground'}`}
                    >
                        <VideoIcon size={12} /> 视频
                    </button>
                </div>
            </div>
            <div className="flex-1 overflow-y-auto p-2 custom-scrollbar space-y-2 relative">
                {filteredAssets.length === 0 ? (
                    <EmptyState 
                        icon={activeHistoryTab === 'image' ? ImageIcon : Film}
                        title={`暂无${activeHistoryTab === 'image' ? '图片' : '视频'}`}
                        className="py-10 opacity-60"
                        textClassName="text-[10px] tracking-widest uppercase"
                    />
                ) : (
                    <div className="grid grid-cols-2 gap-2 p-1">
                        {filteredAssets.map(a => (
                            <div 
                                key={a.id} 
                                className="aspect-square rounded-xl overflow-hidden cursor-grab active:cursor-grabbing border border-white/5 hover:border-cyan-500/50 transition-colors group relative shadow-md bg-black/20"
                                draggable={true}
                                onDragStart={(e) => {
                                    e.dataTransfer.setData('application/json', JSON.stringify(a));
                                    e.dataTransfer.effectAllowed = 'copy';
                                }}
                                onClick={() => onHistoryItemClick?.(a)}
                                onContextMenu={(e) => onContextMenu?.(e, a)}
                            >
                                {a.type.includes('image') ? (
                                    <SecureImage src={a.src} alt={a.title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" draggable={false} />
                                ) : (
                                    <video src={typeof a.src === 'string' ? a.src : undefined} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" draggable={false} />
                                )}
                                <div className="absolute top-1 right-1 px-1.5 py-0.5 rounded-full bg-black/60 backdrop-blur-md text-[8px] font-bold text-white/70">
                                    {a.type.includes('image') ? 'IMG' : 'MOV'}
                                </div>
                                <div className="absolute bottom-0 left-0 w-full p-1.5 bg-gradient-to-t from-black/80 to-transparent text-[9px] text-foreground/90 truncate font-medium">
                                    {a.title || 'Untitled'}
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </>
    );
};
