import React from 'react';

export default function StepConfirmation({
  bookingId,
  confirmInfo,
  loading,
  error,
  onRetry,
  onClose,
  summary,
}) {
  const status = confirmInfo?.status || '';
  const pay = confirmInfo?.payment_status || '';
  const isSuccess = status === 'confirmed' && pay === 'paid';
  const isPending = status === 'pending_payment' || pay === 'unpaid' || pay === 'processing';
  const summaryRows = summary && typeof summary === 'object'
    ? [
      ['Location', summary.location],
      ['Service', summary.service],
      ['Agent', summary.agent],
      ['Date', summary.date],
      ['Time', summary.time],
      ['Total', summary.total],
      ['Payment', summary.paymentMethod],
    ].filter(([, value]) => !!value)
    : [];
  const title = isSuccess ? 'Booking confirmed' : isPending ? 'Payment processing' : 'Payment incomplete';
  const description = isSuccess
    ? 'Your appointment has been reserved and the confirmation details are ready.'
    : isPending
      ? 'The payment provider is still updating the result. You can retry shortly if it does not confirm.'
      : 'The booking is not fully paid yet. Review the payment step and try again.';

  return (
    <div className="bp-step">
      <div className="bp-step-body">
        <div className="bp-step-head">
          <div>
            <h3>Confirmation</h3>
            <div className="bp-muted">{description}</div>
          </div>
        </div>

        {loading ? <div className="bp-muted">Loading booking status...</div> : null}
        {error ? <div className="bp-alert bp-alert-error">{error}</div> : null}

        {!loading && !error ? (
          <>
            {isSuccess ? (
              <div className="bp-alert bp-alert-success">
                Payment successful. Your booking is confirmed.
              </div>
            ) : isPending ? (
              <div className="bp-alert bp-alert-warn">
                Payment is still processing. If it does not confirm shortly, click Retry.
              </div>
            ) : (
              <div className="bp-alert bp-alert-error">
                Payment was not completed. Please try again.
              </div>
            )}

            <section className="bp-section-card">
              <div className="bp-section-intro">
                <div className="bp-section-eyebrow">Status</div>
                <h3 className="bp-section-title">{title}</h3>
                <p className="bp-section-desc">{description}</p>
              </div>
            </section>

            <div className="bp-confirm-card">
              <div className="bp-row"><strong>Booking ID:</strong> <span>#{bookingId}</span></div>
              <div className="bp-row"><strong>Status:</strong> <span>{status || '-'}</span></div>
              <div className="bp-row"><strong>Payment:</strong> <span>{pay || '-'}</span></div>
              {confirmInfo?.payment_method ? (
                <div className="bp-row"><strong>Method:</strong> <span>{confirmInfo.payment_method}</span></div>
              ) : null}
            </div>

            {summaryRows.length ? (
              <section className="bp-section-card bp-confirm-summary">
                <div className="bp-section-intro">
                  <div className="bp-section-eyebrow">Appointment</div>
                  <h3 className="bp-section-title">Booking summary</h3>
                  <p className="bp-section-desc">Keep these details handy if you need to follow up.</p>
                </div>
                <div className="bp-review">
                  {summaryRows.map(([label, value]) => (
                    <div key={label} className="bp-review-row">
                      <div className="k">{label}</div>
                      <div className="v">{value}</div>
                    </div>
                  ))}
                </div>
              </section>
            ) : null}

            <div className="bp-pay-actions" style={{ justifyContent: 'space-between' }}>
              <button type="button" className="bp-btn bp-btn-light" onClick={onClose}>
                Close
              </button>

              {!isSuccess ? (
                <button type="button" className="bp-btn bp-btn-primary" onClick={onRetry}>
                  Retry payment
                </button>
              ) : null}
            </div>
          </>
        ) : null}
      </div>
    </div>
  );
}