"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConversationHistory = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Card_1 = require("../common/Card");
const Button_1 = require("../forms/Button");
const Input_1 = require("../forms/Input");
const Select_1 = require("../forms/Select");
const ConversationHistory = ({ conversationsPerPage = 20, showSearch = true, showFilters = true, showExport = true, showThumbnails = true, dateFormat = 'MMM d, yyyy h:mm a', grouping = 'date', onConversationView, onConversationContinue, onConversationDelete, }) => {
    const [conversations, setConversations] = (0, react_1.useState)([]);
    const [filteredConversations, setFilteredConversations] = (0, react_1.useState)([]);
    const [searchTerm, setSearchTerm] = (0, react_1.useState)('');
    const [providerFilter, setProviderFilter] = (0, react_1.useState)('');
    const [dateFilter, setDateFilter] = (0, react_1.useState)('');
    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
    (0, react_1.useEffect)(() => {
        const fetchConversations = async () => {
            setIsLoading(true);
            try {
                // Mock data - replace with actual API call
                const mockConversations = [
                    {
                        id: '1',
                        title: 'AI Strategy Discussion',
                        firstMessage: 'What are the best practices for implementing AI in enterprise software?',
                        created: new Date('2024-01-15T10:30:00'),
                        provider: 'openai',
                        model: 'gpt-4',
                        messageCount: 12,
                        topic: 'strategy',
                        status: 'active',
                    },
                    {
                        id: '2',
                        title: 'Code Review Assistant',
                        firstMessage: 'Can you help me review this Python function for performance issues?',
                        created: new Date('2024-01-14T15:45:00'),
                        provider: 'anthropic',
                        model: 'claude-3-opus',
                        messageCount: 8,
                        topic: 'development',
                        status: 'active',
                    },
                    {
                        id: '3',
                        firstMessage: 'How do I optimize database queries in Drupal?',
                        created: new Date('2024-01-14T09:20:00'),
                        provider: 'openai',
                        model: 'gpt-3.5-turbo',
                        messageCount: 5,
                        topic: 'drupal',
                        status: 'active',
                    },
                    {
                        id: '4',
                        title: 'Privacy-First AI Implementation',
                        firstMessage: 'What are the privacy considerations when implementing AI features?',
                        created: new Date('2024-01-13T14:10:00'),
                        provider: 'apple',
                        model: 'apple-intelligence',
                        messageCount: 15,
                        topic: 'privacy',
                        status: 'active',
                    },
                ];
                setConversations(mockConversations);
                setFilteredConversations(mockConversations);
            }
            catch (error) {
                console.error('Failed to fetch conversations:', error);
            }
            finally {
                setIsLoading(false);
            }
        };
        fetchConversations();
    }, []);
    (0, react_1.useEffect)(() => {
        let filtered = conversations;
        // Apply search filter
        if (searchTerm) {
            filtered = filtered.filter(conv => conv.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
                conv.firstMessage.toLowerCase().includes(searchTerm.toLowerCase()) ||
                conv.topic?.toLowerCase().includes(searchTerm.toLowerCase()));
        }
        // Apply provider filter
        if (providerFilter) {
            filtered = filtered.filter(conv => conv.provider === providerFilter);
        }
        // Apply date filter
        if (dateFilter) {
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            filtered = filtered.filter(conv => {
                switch (dateFilter) {
                    case 'today':
                        return conv.created >= today;
                    case 'week':
                        const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
                        return conv.created >= weekAgo;
                    case 'month':
                        const monthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
                        return conv.created >= monthAgo;
                    default:
                        return true;
                }
            });
        }
        setFilteredConversations(filtered);
        setCurrentPage(1);
    }, [conversations, searchTerm, providerFilter, dateFilter]);
    const formatDate = (date) => {
        return date.toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric',
            hour: 'numeric',
            minute: '2-digit',
        });
    };
    const groupConversations = (convs) => {
        if (grouping === 'none')
            return { 'All': convs };
        return convs.reduce((groups, conv) => {
            let key;
            switch (grouping) {
                case 'date':
                    key = conv.created.toLocaleDateString('en-US', {
                        month: 'long',
                        day: 'numeric',
                        year: 'numeric',
                    });
                    break;
                case 'provider':
                    key = conv.provider.charAt(0).toUpperCase() + conv.provider.slice(1);
                    break;
                case 'topic':
                    key = conv.topic ? conv.topic.charAt(0).toUpperCase() + conv.topic.slice(1) : 'General';
                    break;
                default:
                    key = 'All';
            }
            if (!groups[key])
                groups[key] = [];
            groups[key].push(conv);
            return groups;
        }, {});
    };
    const paginatedConversations = filteredConversations.slice((currentPage - 1) * conversationsPerPage, currentPage * conversationsPerPage);
    const totalPages = Math.ceil(filteredConversations.length / conversationsPerPage);
    if (isLoading) {
        return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "conversation-history", children: (0, jsx_runtime_1.jsx)("div", { className: "p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "animate-pulse space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-gray-200 rounded w-1/3" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: [...Array(5)].map((_, i) => ((0, jsx_runtime_1.jsx)("div", { className: "h-16 bg-gray-200 rounded" }, i))) })] }) }) }));
    }
    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "conversation-history", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold", children: "Conversation History" }), showExport && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outline", size: "sm", children: "Export" }))] }), (showSearch || showFilters) && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6 space-y-4", children: [showSearch && ((0, jsx_runtime_1.jsx)(Input_1.Input, { type: "text", placeholder: "Search conversations...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full" })), showFilters && ((0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-4", children: [(0, jsx_runtime_1.jsxs)(Select_1.Select, { value: providerFilter, onChange: (e) => setProviderFilter(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "All Providers" }), (0, jsx_runtime_1.jsx)("option", { value: "openai", children: "OpenAI" }), (0, jsx_runtime_1.jsx)("option", { value: "anthropic", children: "Anthropic" }), (0, jsx_runtime_1.jsx)("option", { value: "apple", children: "Apple" })] }), (0, jsx_runtime_1.jsxs)(Select_1.Select, { value: dateFilter, onChange: (e) => setDateFilter(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "All Time" }), (0, jsx_runtime_1.jsx)("option", { value: "today", children: "Today" }), (0, jsx_runtime_1.jsx)("option", { value: "week", children: "This Week" }), (0, jsx_runtime_1.jsx)("option", { value: "month", children: "This Month" })] })] }))] })), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: grouping !== 'none' ? (Object.entries(groupConversations(paginatedConversations)).map(([group, convs]) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-semibold text-gray-700 mb-3", children: group }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: convs.map((conversation) => ((0, jsx_runtime_1.jsx)(ConversationItem, { conversation: conversation, showThumbnails: showThumbnails, onView: onConversationView, onContinue: onConversationContinue, onDelete: onConversationDelete }, conversation.id))) })] }, group)))) : ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: paginatedConversations.map((conversation) => ((0, jsx_runtime_1.jsx)(ConversationItem, { conversation: conversation, showThumbnails: showThumbnails, onView: onConversationView, onContinue: onConversationContinue, onDelete: onConversationDelete }, conversation.id))) })) }), totalPages > 1 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center mt-6 space-x-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outline", size: "sm", onClick: () => setCurrentPage(prev => Math.max(1, prev - 1)), disabled: currentPage === 1, children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: "px-3 py-2 text-sm", children: ["Page ", currentPage, " of ", totalPages] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outline", size: "sm", onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, children: "Next" })] }))] }) }));
};
exports.ConversationHistory = ConversationHistory;
const ConversationItem = ({ conversation, showThumbnails, onView, onContinue, onDelete, }) => {
    const formatDate = (date) => {
        return date.toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            hour: 'numeric',
            minute: '2-digit',
        });
    };
    const getProviderColor = (provider) => {
        switch (provider) {
            case 'openai':
                return 'bg-green-100 text-green-800';
            case 'anthropic':
                return 'bg-purple-100 text-purple-800';
            case 'apple':
                return 'bg-gray-100 text-gray-800';
            default:
                return 'bg-blue-100 text-blue-800';
        }
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: "border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-2", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-gray-900", children: conversation.title || 'Untitled Conversation' }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500", children: formatDate(conversation.created) })] }), showThumbnails && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 mb-3 line-clamp-2", children: conversation.firstMessage.length > 100
                    ? conversation.firstMessage.substring(0, 100) + '...'
                    : conversation.firstMessage })), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${getProviderColor(conversation.provider)}`, children: conversation.provider.charAt(0).toUpperCase() + conversation.provider.slice(1) }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-gray-500", children: [conversation.messageCount, " messages"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-2", children: [onView && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "sm", variant: "outline", onClick: () => onView(conversation.id), children: "View" })), onContinue && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "sm", onClick: () => onContinue(conversation.id), children: "Continue" })), onDelete && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "sm", variant: "outline", onClick: () => onDelete(conversation.id), className: "text-red-600 hover:text-red-700", children: "Delete" }))] })] })] }));
};
exports.default = exports.ConversationHistory;
//# sourceMappingURL=ConversationHistory.js.map