'use client';

import React, { useMemo, useCallback } from 'react';
import { Calendar, FileImage } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useEventCatalogResourcesStore } from '@/stores/eventcatalog-resources-store';
import { useSidebarStore } from '@/stores/sidebar-store';

interface DesignListProps {
    searchTerm: string;
}

const DesignList = React.memo<DesignListProps>(({ searchTerm }) => {
    const { studioFilesFromEventCatalogDirectory } = useEventCatalogResourcesStore();
    const router = useRouter();
    const { setFloatingPanelOpen } = useSidebarStore();

    const filteredDesigns = useMemo(() => {
        if (!studioFilesFromEventCatalogDirectory || !Array.isArray(studioFilesFromEventCatalogDirectory)) {
            return [];
        }

        return studioFilesFromEventCatalogDirectory
            .filter((design) => 
                design.id.toLowerCase().includes(searchTerm.toLowerCase())
            )
            .sort((a, b) => new Date(b.creationDate).getTime() - new Date(a.creationDate).getTime());
    }, [studioFilesFromEventCatalogDirectory, searchTerm]);

    const formatDate = useCallback((dateString: string) => {
        try {
            const date = new Date(dateString);
            return date.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
        } catch {
            return 'Unknown date';
        }
    }, []);

    const handleDesignClick = useCallback((designId: string) => {
        router.push(`/design/catalog/${designId}`);
        // Close the sidepanel
        setFloatingPanelOpen('catalog', false);
    }, [router]);

    if (filteredDesigns.length === 0) {
        return (
            <div className="p-4 text-center text-gray-500">
                {searchTerm.trim() !== '' ? 'No designs found.' : 'No designs available.'}
            </div>
        );
    }

    return (
        <div className="space-y-1.5">
            {filteredDesigns.map((design, index) => (
                <div
                    key={`design-${design.id}-${index}`}
                    onClick={() => handleDesignClick(design.id)}
                    className="flex items-center justify-between px-2.5 py-2 rounded-md border bg-gray-50 border-gray-200 hover:bg-gray-100 cursor-pointer transition-all"
                >
                    <div className="flex items-center space-x-2 flex-grow min-w-0">
                        <FileImage size={16} className="text-blue-600 flex-shrink-0" />
                        <div className="flex flex-col min-w-0 flex-grow">
                            <span className="text-xs font-medium text-gray-700 truncate">{design.id}</span>
                            <div className="flex items-center space-x-1 text-[10px] text-gray-500">
                                <Calendar size={10} />
                                <span>{formatDate(design.creationDate)}</span>
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
});
DesignList.displayName = 'DesignList';

export default DesignList;