'use client';

import React, { useMemo } from 'react';
import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDown } from 'lucide-react';
import DraggableCatalogItem from './DraggableCatalogItem';
import type { CatalogResource, CatalogItemData } from './types';

interface ResourcesTabContentProps {
    searchTerm: string;
    resources: CatalogResource[];
    hoveredItemId: string | null;
    onDragStart: (event: React.DragEvent<HTMLDivElement>, nodeType: string, label: string, data: CatalogItemData) => void;
    onItemMouseEnter: (itemId: string) => void;
    onItemMouseLeave: () => void;
    onItemAdd: (nodeType: string, label: string, data: CatalogItemData) => void;
}

const ResourcesTabContent = React.memo<ResourcesTabContentProps>(({
    searchTerm,
    resources,
    hoveredItemId,
    onDragStart,
    onItemMouseEnter,
    onItemMouseLeave,
    onItemAdd
}) => {
    const groupedResources = useMemo(() => {
        if (!resources || !Array.isArray(resources)) {
            return { events: [], services: [], commands: [], queries: [] };
        }

        const filtered = resources.filter((resource: CatalogResource) =>
            resource.data.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            (resource.data.summary && resource.data.summary.toLowerCase().includes(searchTerm.toLowerCase()))
        );

        return {
            events: filtered.filter((resource: CatalogResource) => resource.collection === 'events'),
            services: filtered.filter((resource: CatalogResource) => resource.collection === 'services'),
            commands: filtered.filter((resource: CatalogResource) => resource.collection === 'commands'),
            queries: filtered.filter((resource: CatalogResource) => resource.collection === 'queries')
        };
    }, [resources, searchTerm]);

    if (!resources || resources.length === 0) {
        return (
            <div className="text-center text-gray-500 mt-8">
                <div className="text-sm text-gray-600 space-y-4 max-w-xs mx-auto">
                    <p>
                        Users can use resources documented from EventCatalog in their diagrams.
                    </p>
                    <p>
                        Open and run the Studio within your catalog directory and Studio will automatically pull these resources in for your diagrams.
                    </p>
                </div>
            </div>
        );
    }

    return (
        <Accordion.Root
            type="multiple"
            defaultValue={['services', 'events']}
            className="space-y-1"
        >
            {groupedResources.services.length > 0 && (
                <Accordion.Item value="services" className="border-0">
                    <Accordion.Header>
                        <Accordion.Trigger className="flex items-center w-full py-4 pb-2 text-left group text-xs font-medium text-gray-900 focus:outline-none">
                            <span className="flex-1">Services</span>
                            <ChevronDown
                                className="h-4 w-4 text-gray-500 transition-transform duration-200 group-data-[state=open]:rotate-180"
                                aria-hidden
                            />
                        </Accordion.Trigger>
                    </Accordion.Header>
                    <Accordion.Content className="overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up">
                        <div className="pt-1 pb-2 space-y-1.5">
                            {groupedResources.services.map((resource: CatalogResource, index: number) => {
                                const uniqueKey = `service-${resource.id}-${resource.collection}-${resource.filePath?.split('/').pop() || index}-${index}`;
                                return (
                                    <DraggableCatalogItem
                                        key={uniqueKey}
                                        resource={resource}
                                        isHovered={hoveredItemId === uniqueKey}
                                        onItemDragStart={onDragStart}
                                        onItemMouseEnter={() => onItemMouseEnter(uniqueKey)}
                                        onItemMouseLeave={onItemMouseLeave}
                                        onItemAdd={onItemAdd}
                                    />
                                );
                            })}
                        </div>
                    </Accordion.Content>
                </Accordion.Item>
            )}

            {groupedResources.events.length > 0 && (
                <Accordion.Item value="events" className="border-0">
                    <Accordion.Header>
                        <Accordion.Trigger className="flex items-center w-full py-4 pb-2 text-left group text-xs font-medium text-gray-900 focus:outline-none">
                            <span className="flex-1">Events</span>
                            <ChevronDown
                                className="h-4 w-4 text-gray-500 transition-transform duration-200 group-data-[state=open]:rotate-180"
                                aria-hidden
                            />
                        </Accordion.Trigger>
                    </Accordion.Header>
                    <Accordion.Content className="overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up">
                        <div className="pt-1 pb-2 space-y-1.5">
                            {groupedResources.events.map((resource: CatalogResource, index: number) => {
                                const uniqueKey = `event-${resource.id}-${resource.collection}-${resource.filePath?.split('/').pop() || index}-${index}`;
                                return (
                                    <DraggableCatalogItem
                                        key={uniqueKey}
                                        resource={resource}
                                        isHovered={hoveredItemId === uniqueKey}
                                        onItemDragStart={onDragStart}
                                        onItemMouseEnter={() => onItemMouseEnter(uniqueKey)}
                                        onItemMouseLeave={onItemMouseLeave}
                                        onItemAdd={onItemAdd}
                                    />
                                );
                            })}
                        </div>
                    </Accordion.Content>
                </Accordion.Item>
            )}

            {groupedResources.commands.length > 0 && (
                <Accordion.Item value="commands" className="border-0">
                    <Accordion.Header>
                        <Accordion.Trigger className="flex items-center w-full py-4 pb-2 text-left group text-xs font-medium text-gray-900 focus:outline-none">
                            <span className="flex-1">Commands</span>
                            <ChevronDown
                                className="h-4 w-4 text-gray-500 transition-transform duration-200 group-data-[state=open]:rotate-180"
                                aria-hidden
                            />
                        </Accordion.Trigger>
                    </Accordion.Header>
                    <Accordion.Content className="overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up">
                        <div className="pt-1 pb-2 space-y-1.5">
                            {groupedResources.commands.map((resource: CatalogResource, index: number) => {
                                const uniqueKey = `command-${resource.id}-${resource.collection}-${resource.filePath?.split('/').pop() || index}-${index}`;
                                return (
                                    <DraggableCatalogItem
                                        key={uniqueKey}
                                        resource={resource}
                                        isHovered={hoveredItemId === uniqueKey}
                                        onItemDragStart={onDragStart}
                                        onItemMouseEnter={() => onItemMouseEnter(uniqueKey)}
                                        onItemMouseLeave={onItemMouseLeave}
                                        onItemAdd={onItemAdd}
                                    />
                                );
                            })}
                        </div>
                    </Accordion.Content>
                </Accordion.Item>
            )}

            {groupedResources.queries.length > 0 && (
                <Accordion.Item value="queries" className="border-0">
                    <Accordion.Header>
                        <Accordion.Trigger className="flex items-center w-full py-4 pb-2 text-left group text-xs font-medium text-gray-900 focus:outline-none">
                            <span className="flex-1">Queries</span>
                            <ChevronDown
                                className="h-4 w-4 text-gray-500 transition-transform duration-200 group-data-[state=open]:rotate-180"
                                aria-hidden
                            />
                        </Accordion.Trigger>
                    </Accordion.Header>
                    <Accordion.Content className="overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up">
                        <div className="pt-1 pb-2 space-y-1.5">
                            {groupedResources.queries.map((resource: CatalogResource, index: number) => {
                                const uniqueKey = `query-${resource.id}-${resource.collection}-${resource.filePath?.split('/').pop() || index}-${index}`;
                                return (
                                    <DraggableCatalogItem
                                        key={uniqueKey}
                                        resource={resource}
                                        isHovered={hoveredItemId === uniqueKey}
                                        onItemDragStart={onDragStart}
                                        onItemMouseEnter={() => onItemMouseEnter(uniqueKey)}
                                        onItemMouseLeave={onItemMouseLeave}
                                        onItemAdd={onItemAdd}
                                    />
                                );
                            })}
                        </div>
                    </Accordion.Content>
                </Accordion.Item>
            )}

            {groupedResources.events.length === 0 && groupedResources.services.length === 0 && searchTerm.trim() !== '' && (
                <p className="p-4 text-center text-gray-500">No results found.</p>
            )}
        </Accordion.Root>
    );
});
ResourcesTabContent.displayName = 'ResourcesTabContent';

export default ResourcesTabContent;