resumeformatter/frontend/components/FolderSection.tsx

import React, { useState, useMemo } from 'react';
import { Folder, ChevronDown, FileText, Receipt } from 'lucide-react';
import { FolderData } from '../types';
import FileItem from './FileItem';

interface FolderSectionProps {
  folder: FolderData;
  searchTerm: string;
  onPreview: (url: string) => void;
}

const FolderSection: React.FC<FolderSectionProps> = ({ folder, searchTerm, onPreview }) => {
  const [isOpen, setIsOpen] = useState(true);

  // Memoize sorted and filtered files for performance
  const sortedAndFilteredFiles = useMemo(() => {
    // 1. Sort by lastModified date (newest first)
    const sorted = [...folder.files].sort((a, b) => 
      new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
    );

    // 2. Filter by search term if it exists
    if (!searchTerm) return sorted;
    return sorted.filter(file =>
      file.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [folder.files, searchTerm]);
  
  // Hide folder section if search term exists and no files match
  if (searchTerm && sortedAndFilteredFiles.length === 0) {
    return null;
  }

  const getFolderIcon = () => {
    const nameLower = folder.name.toLowerCase();
    const iconClasses = "w-6 h-6 text-primary";
    if (nameLower.includes('report')) {
      return <FileText className={iconClasses} />;
    }
    if (nameLower.includes('invoice')) {
      return <Receipt className={iconClasses} />;
    }
    return <Folder className={iconClasses} />;
  };

  return (
    <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md mb-6 overflow-hidden border border-slate-200 dark:border-slate-700">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex justify-between items-center p-4 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
        aria-expanded={isOpen}
      >
        <div className="flex items-center gap-3">
          {getFolderIcon()}
          <h2 className="text-lg font-bold text-slate-800 dark:text-slate-200">{folder.name}</h2>
          <span className="text-sm font-medium bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400 px-2 py-0.5 rounded-full">
            {sortedAndFilteredFiles.length} file{sortedAndFilteredFiles.length !== 1 ? 's' : ''}
          </span>
        </div>
        <ChevronDown
          className={`w-6 h-6 text-slate-500 transition-transform duration-300 ${
            isOpen ? 'rotate-180' : ''
          }`}
        />
      </button>
      <div
        className={`grid transition-all duration-300 ease-in-out ${
          isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
        }`}
      >
        <div className="overflow-hidden">
          {sortedAndFilteredFiles.length > 0 ? (
            <div>
              {sortedAndFilteredFiles.map(file => (
                <FileItem key={file.name} file={file} onPreview={onPreview} />
              ))}
            </div>
          ) : (
            <p className="p-4 text-slate-500 dark:text-slate-400">No files in this folder.</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default FolderSection;