video-flow-b/components/pages/create-video/PhotoPreview/PhotoPreviewSection.tsx

"use client";

import { useState } from 'react';
import { Image, Tooltip } from 'antd';
import NextImage from 'next/image';
import { EyeOutlined, SwapOutlined, UserOutlined, CameraOutlined, BulbOutlined } from '@ant-design/icons';
import { useDeviceType } from '@/hooks/useDeviceType';
import type { PhotoPreviewSectionProps, PhotoType } from './types';
import './styles.css';

/**
 * Photo Preview Section Component
 * Displays a horizontal list of photos with type indicators and preview/replace functionality
 * @param photos - Array of photos with type information
 * @param onEdit - Callback when a photo is clicked for editing
 * @param onReplace - Callback when replace button is clicked
 * @param className - Additional CSS classes
 */
export default function PhotoPreviewSection({
    photos = [],
    onEdit,
    onReplace,
    className = '',
}: PhotoPreviewSectionProps) {
    const [previewVisible, setPreviewVisible] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
    const { isMobileDevice } = useDeviceType();

    /**
     * Get icon for photo type
     */
    const getTypeIcon = (type: PhotoType) => {
        switch (type) {
            case 'character':
                return <UserOutlined className="text-sm" />;
            case 'scene':
                return <CameraOutlined className="text-sm" />;
            case 'prop':
                return <BulbOutlined className="text-sm" />;
            default:
                return null;
        }
    };

    /**
     * Get label for photo type
     */
    const getTypeLabel = (type: PhotoType) => {
        switch (type) {
            case 'character':
                return 'Character';
            case 'scene':
                return 'Scene';
            case 'prop':
                return 'Prop';
            default:
                return '';
        }
    };

    /**
     * Handle photo preview
     */
    const handlePreview = (url: string) => {
        setPreviewImage(url);
        setPreviewVisible(true);
    };

    /**
     * Handle preview button click
     */
    const handlePreviewClick = (e: React.MouseEvent, url: string) => {
        e.stopPropagation();
        handlePreview(url);
    };

    /**
     * Handle replace button click
     */
    const handleReplaceClick = (e: React.MouseEvent, index: number) => {
        e.stopPropagation();
        onReplace?.(index);
    };

    /** Don't render if no photos */
    if (photos.length === 0) {
        return null;
    }

    return (
        <div data-alt="photo-preview-section" className={`w-full ${className}`}>
            {/* Photo List Container with Horizontal Scroll */}
            <div
                data-alt="photo-list-container"
                className="flex gap-2 overflow-x-auto overflow-y-hidden photo-list-scrollbar"
            >
                {photos.map((photo, index) => {
                    const photoName = photo.name || `${getTypeLabel(photo.type)} ${index + 1}`;
                    return (
                        <div
                            key={photo.id || `photo-${index}`}
                            data-alt="photo-item-wrapper"
                            className="flex-shrink-0 flex flex-col gap-1"
                        >
                            {/* Photo Image Container */}
                            <div
                                data-alt="photo-item"
                                className="relative w-16 h-16 rounded-[16px] overflow-hidden border border-white/10 hover:border-cyan-400/60 transition-all duration-200 group bg-black/20"
                                onMouseEnter={() => setHoveredIndex(index)}
                                onMouseLeave={() => setHoveredIndex(null)}
                            >
                                {/* Photo Image */}
                                <div className="w-full h-full relative">
                                    <NextImage
                                        src={photo.url}
                                        alt={photoName}
                                        fill
                                        className="object-cover"
                                        unoptimized
                                    />
                                </div>

                                {/* Hover Overlay with Preview and Replace Icons */}
                                <div
                                    data-alt="hover-overlay"
                                    className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-1 z-[5]"
                                >
                                    {/* Preview Button */}
                                    <button
                                        data-alt="preview-button"
                                        className="w-5 h-5 rounded-full bg-cyan-400/90 hover:bg-cyan-400 flex items-center justify-center transition-all duration-200 shadow-lg"
                                        onClick={(e) => handlePreviewClick(e, photo.url)}
                                    >
                                        <EyeOutlined className="text-xs text-black" />
                                    </button>

                                    {/* Replace Button */}
                                    <button
                                        data-alt="replace-button"
                                        className="w-5 h-5 rounded-full bg-cyan-400/90 hover:bg-cyan-400 flex items-center justify-center transition-all duration-200 shadow-lg"
                                        onClick={(e) => handleReplaceClick(e, index)}
                                    >
                                        <SwapOutlined className="text-xs text-black" />
                                    </button>
                                </div>

                                {/* Type Icon - Bottom Left Corner */}
                                <div
                                    data-alt="type-icon"
                                    className="absolute bottom-1 left-1 w-4 h-4 bg-black/60 backdrop-blur-sm text-cyan-400 rounded-sm flex items-center justify-center z-[6]"
                                >
                                    {getTypeIcon(photo.type)}
                                </div>
                            </div>

                            {/* Photo Name - Below Image */}
                            {isMobileDevice ? (
                                // H5: Direct display with line-clamp
                                <div
                                    data-alt="photo-name-mobile"
                                    className="w-16 text-white/70 text-[10px] leading-tight line-clamp-2 text-center px-0.5"
                                    style={{ wordBreak: 'break-word' }}
                                >
                                    {photoName}
                                </div>
                            ) : (
                                // PC: Tooltip on hover
                                <Tooltip title={photoName} placement="bottom">
                                    <div
                                        data-alt="photo-name-desktop"
                                        className="w-16 text-white/70 text-xs text-center truncate px-0.5 cursor-default"
                                    >
                                        {photoName}
                                    </div>
                                </Tooltip>
                            )}
                        </div>
                    );
                })}
            </div>

            {/* Preview Modal - Using absolute positioning to avoid layout space */}
            <div style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden', opacity: 0, pointerEvents: 'none' }}>
                <Image
                    width={0}
                    height={0}
                    src={previewImage}
                    alt="Preview"
                    preview={{
                        visible: previewVisible,
                        src: previewImage,
                        onVisibleChange: (visible) => {
                            setPreviewVisible(visible);
                        },
                    }}
                />
            </div>
        </div>
    );
}