/**
 * Agents Section Component
 * @description Displays agents list with tabs and pagination
 */

import { useState, useMemo, useEffect } from 'react';
import { AgentCard } from './agent-card';
import { Pagination } from './pagination';
import type { AgentData } from '@/constants/agents';

/**
 * Agents section component props
 */
interface AgentsSectionProps {
    /**
     * List of agents to display
     */
    agents: AgentData[];
    /**
     * Number of items per page
     */
    itemsPerPage?: number;
}

/**
 * Agents section component
 * @description Displays agents with tabs and pagination
 * @param props - Component props
 * @returns AgentsSection element
 */
export function AgentsSection({ agents, itemsPerPage = 6 }: AgentsSectionProps) {
    const [activeTab, setActiveTab] = useState<'all' | 'my'>('all');
    const [currentPage, setCurrentPage] = useState(1);

    /**
     * Calculate pagination values
     */
    const paginationData = useMemo(() => {
        const totalItems = agents.length;
        const totalPages = Math.ceil(totalItems / itemsPerPage);
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const paginatedAgents = agents.slice(startIndex, endIndex);

        return {
            totalPages,
            paginatedAgents,
        };
    }, [agents, currentPage, itemsPerPage]);

    /**
     * Reset pagination when tab changes
     */
    useEffect(() => {
        setCurrentPage(1);
    }, [activeTab]);

    /**
     * Handle page change
     * @param page - New page number (1-indexed)
     */
    const handlePageChange = (page: number) => {
        setCurrentPage(page);
    };

    return (
        <div className="bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-200 p-4 md:p-6 pb-20 md:pb-24">
            {/* Tabs */}
            <div className="flex gap-2 md:gap-4 mb-4 md:mb-6">
                <button
                    onClick={() => setActiveTab('all')}
                    className={`px-4 py-2 md:px-6 md:py-2 rounded-lg text-[0.875rem] md:text-[1rem] font-medium transition-colors min-h-[44px] ${
                        activeTab === 'all'
                            ? 'bg-black text-white'
                            : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'
                    }`}
                >
                    All Agents
                </button>
                <button
                    onClick={() => setActiveTab('my')}
                    className={`px-4 py-2 md:px-6 md:py-2 rounded-lg text-[0.875rem] md:text-[1rem] font-medium transition-colors min-h-[44px] ${
                        activeTab === 'my'
                            ? 'bg-black text-white'
                            : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'
                    }`}
                >
                    My Agents
                </button>
            </div>

            {/* Agent Cards Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 mb-4 md:mb-6">
                {paginationData.paginatedAgents.map((agent, index) => (
                    <AgentCard
                        key={`${agent.title}-${index}`}
                        title={agent.title}
                        tags={agent.tags}
                        description={agent.description}
                    />
                ))}
            </div>

            {/* Fixed Pagination at Bottom */}
            {paginationData.totalPages > 1 && (
                <div className="fixed bottom-0 left-0 right-0 md:left-[88px] lg:left-[88px] md:mx-6 lg:mx-8 md:rounded-2xl bg-white border-t border-gray-200 px-4 py-3 md:px-6 lg:px-10 md:py-4 flex justify-end z-40 shadow-lg">
                    <Pagination
                        currentPage={currentPage}
                        totalPages={paginationData.totalPages}
                        onPageChange={handlePageChange}
                    />
                </div>
            )}
        </div>
    );
}

