import React from 'react'
import { FileText, ChevronDown, ChevronRight, Trash2 } from 'lucide-react'
import type { DocumentInfo } from '../types'

interface DocumentListProps {
  documents: DocumentInfo[]
  expandedId: string | null
  onToggleExpand: (documentId: string) => void
  onDelete: (documentId: string, filename: string) => void
  isDeleting: boolean
}

export const DocumentList: React.FC<DocumentListProps> = ({
  documents,
  expandedId,
  onToggleExpand,
  onDelete,
  isDeleting,
}) => {
  return (
    <div className="space-y-3">
      {documents.map((doc) => (
        <div
          key={doc.document_id}
          data-testid="document-card"
          className="border border-gray-200 rounded-lg bg-white overflow-hidden"
        >
          <div className="p-4 flex items-center justify-between">
            <div className="flex items-center space-x-3 flex-1">
              <FileText className="w-5 h-5 text-gray-500 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <div className="font-medium text-gray-900 truncate">{doc.filename}</div>
                <div className="text-sm text-gray-500">
                  {doc.chunk_count} chunks • Uploaded {doc.upload_date}
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <button
                data-testid="view-chunks-btn"
                onClick={() => onToggleExpand(doc.document_id)}
                className="flex items-center space-x-1 px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors duration-200"
              >
                {expandedId === doc.document_id ? (
                  <>
                    <ChevronDown className="w-4 h-4" />
                    <span>Hide Chunks</span>
                  </>
                ) : (
                  <>
                    <ChevronRight className="w-4 h-4" />
                    <span>View Chunks</span>
                  </>
                )}
              </button>
              <button
                data-testid="delete-document-btn"
                onClick={() => onDelete(doc.document_id, doc.filename)}
                disabled={isDeleting}
                className="flex items-center space-x-1 px-3 py-1.5 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}
