// SigningStatus — polls for e-signature completion on the Google Doc.

function SigningStatus({ submissionId }) {
  const { React } = window;
  const { useState, useEffect, useRef } = React;

  const [status, setStatus] = useState('pending_signature');
  const [signedAt, setSignedAt] = useState(null);
  const [checking, setChecking] = useState(false);
  const intervalRef = useRef(null);
  const elapsedRef = useRef(0);

  useEffect(() => {
    if (!submissionId) return;

    function poll() {
      fetch(`/api/managed-scan-status?id=${encodeURIComponent(submissionId)}`)
        .then(r => r.json())
        .then(json => {
          if (json.status) setStatus(json.status);
          if (json.signedAt) setSignedAt(json.signedAt);
          if (json.status === 'signed' || json.status === 'provisioning' || json.status === 'active' || json.status === 'complete') {
            clearInterval(intervalRef.current);
          }
        })
        .catch(() => {});

      elapsedRef.current += 1;
    }

    const interval = elapsedRef.current < 30 ? 10000 : 30000;
    intervalRef.current = setInterval(poll, interval);

    return () => clearInterval(intervalRef.current);
  }, [submissionId]);

  function handleCheckSignature() {
    setChecking(true);
    fetch(`/api/managed-scan-status?id=${encodeURIComponent(submissionId)}&action=check_signature`)
      .then(r => r.json())
      .then(json => {
        if (json.status) setStatus(json.status);
        if (json.signedAt) setSignedAt(json.signedAt);
      })
      .catch(() => {})
      .finally(() => setChecking(false));
  }

  if (status === 'signed' || status === 'provisioning' || status === 'active' || status === 'complete') {
    return (
      <div className="signing-status">
        <div className="success-icon">✓</div>
        <p style={{ fontSize: '14px', color: 'var(--forest)', marginTop: '12px' }}>
          authorization received
        </p>
        <p style={{ fontSize: '13px', color: 'var(--muted)', marginTop: '8px' }}>
          our ops team has been notified and will provision your scanner within 1 business day.
        </p>
        {signedAt && (
          <p style={{ fontSize: '11px', color: 'var(--muted)', marginTop: '8px', fontFamily: "'JetBrains Mono', monospace" }}>
            signed at {new Date(signedAt).toLocaleString()}
          </p>
        )}
      </div>
    );
  }

  return (
    <div className="signing-status">
      <div className="signing-pulse" />
      <p style={{ fontSize: '14px', color: 'var(--muted)', marginTop: '16px' }}>
        waiting for your signature on the authorization document
      </p>
      <button
        className="btn-next"
        style={{ marginTop: '16px' }}
        onClick={handleCheckSignature}
        disabled={checking}
      >
        {checking ? 'checking...' : 'I have signed the document'}
      </button>
    </div>
  );
}

window.SigningStatus = SigningStatus;