import { useNavigate } from 'react-router-dom';

interface SuccessComponentProps {
  task: any;
}

const SuccessComponent: React.FC<SuccessComponentProps> = ({ task }) => {
  const navigate = useNavigate();

  const handleTryAgain = () => {
    navigate('/home');
  };

  const handleDownload = () => {
    if (task?.outputUrl) {
      // In H5 environment, create download link
      const link = document.createElement('a');
      link.href = task.outputUrl;
      link.download = `generated_${Date.now()}.${task.outputUrl.includes('.mp4') ? 'mp4' : 'jpg'}`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  };

  return (
    <div className="result-page success">
      <div className="success-content">
        <div className="result-container">
          {task?.outputUrl ? (
            task.outputUrl.includes('.mp4') ? (
              <video
                className="result-video"
                src={task.outputUrl}
                controls
                autoPlay
                muted
                loop
                playsInline
                webkit-playsinline="true"
              />
            ) : (
              <img className="result-image" src={`https://api.bestaibest.ai/cdn/${encodeURIComponent(task.outputUrl)}`} alt="Generated result" />
            )
          ) : (
            <div className="result-placeholder">
              <div className="placeholder-text">Result generating...</div>
            </div>
          )}
        </div>

        <div className="success-actions">
          <button className="download-btn" onClick={handleDownload}>
            Download
          </button>
          <button className="try-again-btn" onClick={handleTryAgain}>
            Try Again
          </button>
        </div>
      </div>
    </div>
  );
};

export default SuccessComponent;
