import React from 'react';
import TrainingVideoPlayer from '../components/TrainingVideoPlayer';

export default function Step4Video({ state, updateState, completeStep, renderPart = 'all' }) {
  const { step4, debug } = state;
  const completed = step4.completed;

  const handleComplete = () => {
    updateState((prev) => ({
      ...prev,
      step4: {
        completed: true,
        watchedSeconds: 30,
        completedAt: new Date().toISOString(),
      },
    }));
  };

  const content = (
    <div className="dt-card">
      <h2 className="dt-card-title">安全培训视频</h2>
      <p className="dt-field-hint" style={{ marginBottom: 12 }}>
        氢能重卡安全驾驶培训 · 预计时长 30 秒
      </p>
      <TrainingVideoPlayer
        completed={completed}
        watchedSeconds={step4.watchedSeconds}
        onProgress={(s) =>
          updateState((prev) => ({ ...prev, step4: { ...prev.step4, watchedSeconds: s } }))
        }
        onComplete={handleComplete}
        debugComplete={debug.videoStatus === 'completed' && !completed}
      />
      {completed && (
        <div className="dt-success-banner" style={{ marginTop: 12 }}>
          <span>✓</span>
          <span>视频观看完成</span>
        </div>
      )}
    </div>
  );

  const footer = (
    <>
      {!completed && <div className="dt-footer-hint">请完整观看安全培训视频</div>}
      <button type="button" className="dt-btn-primary" disabled={!completed} onClick={() => completeStep(4)}>
        下一步
      </button>
    </>
  );

  if (renderPart === 'content') return content;
  if (renderPart === 'footer') return footer;
  return (
    <>
      {content}
      {footer}
    </>
  );
}
