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

export default function Step5Portrait({ state, updateState, completeStep, renderPart = 'all' }) {
  const { step5, debug } = state;

  const content = (
    <div className="dt-card">
      <h2 className="dt-card-title">本人照片</h2>
      <CameraCapture
        photoDataUrl={step5.photoDataUrl}
        confirmed={step5.confirmed}
        cameraPermission={debug.cameraPermission}
        showDevFallback
        onCapture={(url) =>
          updateState((prev) => ({
            ...prev,
            step5: { ...prev.step5, photoDataUrl: url, confirmed: false },
          }))
        }
        onConfirm={() =>
          updateState((prev) => ({
            ...prev,
            step5: {
              ...prev.step5,
              confirmed: true,
              capturedAt: new Date().toISOString(),
            },
          }))
        }
        onRetake={() =>
          updateState((prev) => ({
            ...prev,
            step5: { photoDataUrl: null, confirmed: false, capturedAt: null },
          }))
        }
      />
    </div>
  );

  const footer = (
    <>
      {!step5.confirmed && (
        <div className="dt-footer-hint">请拍照并确认使用本人照片</div>
      )}
      <button type="button" className="dt-btn-primary" disabled={!step5.confirmed} onClick={() => completeStep(5)}>
        下一步
      </button>
    </>
  );

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