import React, { useState, memo } from 'react';
import type { Submission } from '../types';
import HistoryItem from './HistoryItem';

interface SubmissionHistoryProps {
  submissions: Submission[];
  onErrorClick: (details: string) => void;
  onDelete: (id: string) => void;
  onRetry: (submission: Submission, errorGeIds: string[], errorUsernames: string[]) => void;
  onPaste: (username: string, geIdAndLang: string) => void;
}

const SubmissionHistory: React.FC<SubmissionHistoryProps> = ({ submissions, onErrorClick, onDelete, onRetry, onPaste }) => {
  const [hideNonErrors, setHideNonErrors] = useState(false);

  return (
    <div className="w-full">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-semibold text-white">Lịch sử submit</h2>
        <label className="flex items-center gap-2 text-sm text-slate-400 cursor-pointer">
          <span>Chỉ hiện lỗi</span>
          <button
            onClick={() => setHideNonErrors(!hideNonErrors)}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${hideNonErrors ? 'bg-indigo-600' : 'bg-slate-600'
              }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${hideNonErrors ? 'translate-x-6' : 'translate-x-1'
                }`}
            />
          </button>
        </label>
      </div>
      {submissions.length > 0 ? (
        <div className="space-y-4">
          {submissions.map((sub) => (
            <HistoryItem
              key={sub.id}
              submission={sub}
              onErrorClick={onErrorClick}
              onDelete={onDelete}
              onRetry={onRetry}
              onPaste={onPaste}
              hideNonErrors={hideNonErrors}
            />
          ))}
        </div>
      ) : (
        <div className="text-center py-10 px-6 bg-slate-800/50 border border-slate-700 rounded-lg">
          <p className="text-slate-400">Chưa có lần submit nào.</p>
        </div>
      )}
    </div>
  );
};

export default memo(SubmissionHistory);