import React from 'react';
import { X, Trash2, Image as ImageIcon } from 'lucide-react';
import { SecureImage } from '@/components/common/SecureImage';
import { GenerationRecord } from '@/types';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { EmptyState } from '@/components/ui/empty-state';
import { useConfirm } from '@/components/ui/confirm-dialog';

export interface TaskDetailsModalProps {
    previewMedia: {
        url: string;
        type: 'image' | 'video';
        generation?: GenerationRecord;
    } | null;
    onClose: () => void;
    onDelete?: () => void;
}

export function TaskDetailsModal({
    previewMedia,
    onClose,
    onDelete
}: TaskDetailsModalProps) {
    const { confirm, ConfirmDialog } = useConfirm();

    if (!previewMedia) return null;

    return (
        <>
        <ConfirmDialog />
        <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
            <DialogContent 
                className="max-w-6xl h-[80vh] p-0 gap-0 overflow-hidden flex flex-col sm:flex-row border-none bg-background sm:rounded-2xl [&>button]:hidden"
            >
                <DialogTitle className="sr-only">任务详情</DialogTitle>
                
                {/* Left: Media Preview */}
                <div className="flex-1 bg-black flex items-center justify-center p-8 relative border-r border-border min-h-[300px] sm:min-h-full">
                    {previewMedia.type === 'image' ? (
                        <SecureImage 
                            src={previewMedia.url} 
                            alt="Preview" 
                            className="max-w-full max-h-full object-contain" 
                        />
                    ) : (
                        <video 
                            src={typeof previewMedia.url === 'string' ? previewMedia.url : undefined}
                            controls 
                            autoPlay
                            className="max-w-full max-h-full object-contain" 
                        />
                    )}
                </div>

                {/* Right: Task Details */}
                <div className="w-full sm:w-[400px] flex flex-col bg-background h-full">
                    <div className="p-6 border-b border-border flex justify-between items-center shrink-0">
                        <h3 className="text-lg font-bold text-foreground">任务详情</h3>
                        <div className="flex items-center gap-2">
                            {onDelete && (
                                <Button 
                                    variant="ghost"
                                    size="icon"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        confirm({
                                            title: '确认删除？',
                                            description: '确定要删除此任务及关联文件吗？此操作无法撤销。',
                                            variant: 'destructive',
                                            onConfirm: () => {
                                                onDelete();
                                                onClose();
                                            }
                                        });
                                    }}
                                    className="text-red-400 hover:text-red-300 hover:bg-red-900/20 h-8 w-8"
                                    title="删除任务"
                                >
                                    <Trash2 size={18} />
                                </Button>
                            )}
                            <Button 
                                variant="ghost"
                                size="icon"
                                onClick={onClose}
                                className="text-muted-foreground hover:text-foreground h-8 w-8"
                            >
                                <X size={20} />
                            </Button>
                        </div>
                    </div>
                    
                    <div className="flex-1 overflow-y-auto p-6 space-y-6">
                        {previewMedia.generation ? (
                            <>
                                <div className="space-y-2">
                                    <label className="text-xs font-medium text-muted-foreground">提示词</label>
                                    <p className="text-sm text-foreground leading-relaxed bg-background p-3 rounded-lg border border-border">
                                        {previewMedia.generation.prompt}
                                    </p>
                                </div>

                                {previewMedia.generation.params?.negativePrompt && (
                                    <div className="space-y-2">
                                        <label className="text-xs font-medium text-muted-foreground">反向提示词</label>
                                        <p className="text-sm text-foreground leading-relaxed bg-background p-3 rounded-lg border border-border">
                                            {previewMedia.generation.params.negativePrompt}
                                        </p>
                                    </div>
                                )}

                                <div className="grid grid-cols-2 gap-4">
                                    <div className="space-y-1">
                                        <label className="text-xs font-medium text-muted-foreground">模型</label>
                                        <p className="text-sm text-foreground">{previewMedia.generation.model}</p>
                                    </div>
                                    <div className="space-y-1">
                                        <label className="text-xs font-medium text-muted-foreground">生成时间</label>
                                        <p className="text-sm text-foreground">
                                            {new Date(previewMedia.generation.timestamp).toLocaleString('zh-CN')}
                                        </p>
                                    </div>
                                    {previewMedia.generation.type === 'image' && previewMedia.generation.params.styleId && (
                                        <div className="space-y-1">
                                            <label className="text-xs font-medium text-muted-foreground">风格预设</label>
                                            <p className="text-sm text-foreground">
                                                {previewMedia.generation.params.styleId}
                                            </p>
                                        </div>
                                    )}
                                    {previewMedia.generation.params?.aspectRatio && (
                                        <div className="space-y-1">
                                            <label className="text-xs font-medium text-muted-foreground">宽高比</label>
                                            <p className="text-sm text-foreground font-mono">{previewMedia.generation.params.aspectRatio}</p>
                                        </div>
                                    )}
                                    {/* Video specific params */}
                                    {previewMedia.type === 'video' && (previewMedia.generation.params as any).duration && (
                                        <div className="space-y-1">
                                            <label className="text-xs font-medium text-muted-foreground">时长</label>
                                            <p className="text-sm text-foreground font-mono">{(previewMedia.generation.params as any).duration}s</p>
                                        </div>
                                    )}
                                </div>
                            </>
                        ) : (
                            <EmptyState 
                                icon={ImageIcon}
                                title="暂无任务详情信息"
                                description="该资源可能是上传导入的"
                                className="h-full"
                            />
                        )}
                    </div>
                </div>
            </DialogContent>
        </Dialog>
        </>
    );
}
