import { deleteDocument } from '../services/api';

export default function DocumentList({ documents, onDocumentDeleted, isLoading }) {
  const handleDelete = async (docId, filename) => {
    if (!confirm(`Delete "${filename}" and all its data?`)) return;

    try {
      await deleteDocument(docId);
      onDocumentDeleted?.(docId);
    } catch (err) {
      alert(`Failed to delete: ${err.message}`);
    }
  };

  if (isLoading) {
    return (
      <div className="document-list">
        <h3 className="section-title">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
          </svg>
          Documents
        </h3>
        <div className="loading-shimmer">
          <div className="shimmer-line"></div>
          <div className="shimmer-line short"></div>
        </div>
      </div>
    );
  }

  return (
    <div className="document-list">
      <h3 className="section-title">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
          <polyline points="14 2 14 8 20 8" />
        </svg>
        Documents
        {documents.length > 0 && (
          <span className="doc-count">{documents.length}</span>
        )}
      </h3>

      {documents.length === 0 ? (
        <div className="no-documents">
          <p>No documents yet</p>
          <p className="hint">Upload a PDF to get started</p>
        </div>
      ) : (
        <ul className="doc-items">
          {documents.map((doc) => (
            <li key={doc.id} className="doc-item">
              <div className="doc-info">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                  <polyline points="14 2 14 8 20 8" />
                </svg>
                <span className="doc-name" title={doc.filename}>
                  {doc.filename}
                </span>
              </div>
              <button
                className="delete-btn"
                onClick={() => handleDelete(doc.id, doc.filename)}
                title="Delete document"
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <polyline points="3 6 5 6 21 6" />
                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                </svg>
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}