import React, { useState } from 'react';
import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
import { motion, AnimatePresence } from "framer-motion";
import DateienItem from './DateienItem';
import { UserFile } from '../../hooks/useFiles';
import { useLanguage } from '../../contexts/LanguageContext';
import styles from './DateienLists.module.css';

// Sort types
type SortField = 'file_name' | 'action' | 'size' | 'created_at';
type SortDirection = 'asc' | 'desc';

interface DateienCreatedProps {
    files: UserFile[];
    onFileDeleted: () => void;
    onOptimisticDelete?: (fileId: number) => void;
}

const DateienCreated: React.FC<DateienCreatedProps> = ({ files, onFileDeleted, onOptimisticDelete }) => {
    const { t } = useLanguage();
    const [sortField, setSortField] = useState<SortField>('created_at');
    const [sortDirection, setSortDirection] = useState<SortDirection>('desc');

    // Filter files for created (agent_created)
    const createdFiles = files.filter(file => file.source === 'agent_created');

    // Handle sorting
    const handleSort = (field: SortField) => {
        if (field === sortField) {
            setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
        } else {
            setSortField(field);
            setSortDirection(field === 'created_at' ? 'desc' : 'asc');
        }
    };

    // Sort files
    const sortedFiles = [...createdFiles].sort((a, b) => {
        let result = 0;
        
        switch (sortField) {
            case 'file_name':
                result = a.file_name.localeCompare(b.file_name);
                break;
            case 'action':
                result = a.action.localeCompare(b.action);
                break;
            case 'size':
                const sizeA = a.size ?? 0;
                const sizeB = b.size ?? 0;
                result = sizeA - sizeB;
                break;
            case 'created_at':
                result = new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
                break;
        }
        
        return sortDirection === 'asc' ? result : -result;
    });

    // Helper to render sort icon
    const renderSortIcon = (field: SortField) => {
        if (sortField !== field) return <FaSort className={styles.sortIcon} />;
        return sortDirection === 'asc' ? 
            <FaSortUp className={styles.sortIcon} /> : 
            <FaSortDown className={styles.sortIcon} />;
    };

    if (sortedFiles.length === 0) {
        return (
            <motion.div 
                className={styles.noFilesMessage}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.3 }}
            >
                <p>{t('files.no_ai_files', 'No AI-created files found.')}</p>
            </motion.div>
        );
    }

    return (
        <motion.div 
            className={styles.filesTable}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3 }}
        >
            {/* Table Headers */}
            <div className={styles.tableHeader}>
                <div className={styles.headerCell} onClick={() => handleSort('file_name')}>
                    <span>{t('files.header.name', 'Name')}</span>
                    {renderSortIcon('file_name')}
                </div>
                <div className={styles.headerCell} onClick={() => handleSort('action')}>
                    <span>{t('files.header.type', 'Type')}</span>
                    {renderSortIcon('action')}
                </div>
                <div className={styles.headerCell} onClick={() => handleSort('size')}>
                    <span>{t('files.header.size', 'Size')}</span>
                    {renderSortIcon('size')}
                </div>
                <div className={styles.headerCell} onClick={() => handleSort('created_at')}>
                    <span>{t('files.header.date', 'Date')}</span>
                    {renderSortIcon('created_at')}
                </div>
            </div>
            
            {/* Files List with AI-created indicator */}
            <motion.ul 
                className={`${styles.filesList} ${styles.aiCreated}`}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.4, delay: 0.1 }}
            >
                <AnimatePresence mode="popLayout">
                    {sortedFiles.map((file: UserFile) => (
                        <motion.div
                            key={file.id}
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            transition={{ duration: 0.2 }}
                            layout
                        >
                            <DateienItem 
                                file={file}
                                onDelete={onFileDeleted}
                                onOptimisticDelete={onOptimisticDelete ? () => onOptimisticDelete(file.id) : undefined}
                            />
                        </motion.div>
                    ))}
                </AnimatePresence>
            </motion.ul>
        </motion.div>
    );
};

export default DateienCreated;