// Checkout — SolaceNet (IRU) subscription flow

import React, { useState } from 'react';
import { apiClient } from '@/services/api/client';
import { SOLACENET_PRODUCT_NAME, SOLACENET_VENDOR_NAME } from '@/constants/marketplace';

interface CheckoutFlowProps {
  subscriptionId?: string;
  offeringId: string;
  onSuccess?: () => void;
  onCancel?: () => void;
}

export const CheckoutFlow: React.FC<CheckoutFlowProps> = ({
  subscriptionId,
  offeringId,
  onSuccess,
  onCancel,
}) => {
  const [step, setStep] = useState(1);
  const [paymentMethod, setPaymentMethod] = useState('wire');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handlePayment = async () => {
    setLoading(true);
    setError(null);

    try {
      // TODO: Integrate with payment processor (Stripe/Braintree)
      // For now, simulate payment processing
      await new Promise((resolve) => setTimeout(resolve, 2000));
      
      if (onSuccess) {
        onSuccess();
      }
    } catch (err: any) {
      setError(err.message || 'Payment processing failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="bg-white rounded-lg shadow-lg p-8">
        <h2 className="text-2xl font-bold mb-6 text-gray-800">Complete Your Subscription</h2>

        {/* Progress Steps */}
        <div className="flex items-center justify-between mb-8">
          {[1, 2, 3].map((s) => (
            <React.Fragment key={s}>
              <div className="flex flex-col items-center">
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center ${
                    step >= s ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600'
                  }`}
                >
                  {step > s ? '✓' : s}
                </div>
                <div className="text-xs mt-2 text-gray-600">
                  {s === 1 ? 'Review' : s === 2 ? 'Payment' : 'Confirm'}
                </div>
              </div>
              {s < 3 && (
                <div
                  className={`flex-1 h-1 mx-2 ${
                    step > s ? 'bg-blue-600' : 'bg-gray-200'
                  }`}
                />
              )}
            </React.Fragment>
          ))}
        </div>

        {error && (
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
            {error}
          </div>
        )}

        {/* Step 1: Review */}
        {step === 1 && (
          <div className="space-y-4">
            <h3 className="text-xl font-semibold mb-4 text-gray-800">Review Your Subscription</h3>
            <div className="bg-gray-50 p-4 rounded">
              <p className="text-gray-600">Offering ID: {offeringId}</p>
              <p className="text-gray-600 mt-2">
                Please review the {SOLACENET_PRODUCT_NAME} participation agreement (
                {SOLACENET_VENDOR_NAME}) before proceeding.
              </p>
            </div>
            <button
              onClick={() => setStep(2)}
              className="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition-colors"
            >
              Continue to Payment
            </button>
          </div>
        )}

        {/* Step 2: Payment */}
        {step === 2 && (
          <div className="space-y-4">
            <h3 className="text-xl font-semibold mb-4 text-gray-800">Select Payment Method</h3>
            <div className="space-y-2">
              {['wire', 'ach', 'credit'].map((method) => (
                <label
                  key={method}
                  className={`flex items-center p-4 border-2 rounded cursor-pointer ${
                    paymentMethod === method
                      ? 'border-blue-600 bg-blue-50'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <input
                    type="radio"
                    name="paymentMethod"
                    value={method}
                    checked={paymentMethod === method}
                    onChange={(e) => setPaymentMethod(e.target.value)}
                    className="mr-3"
                  />
                  <span className="capitalize">{method === 'ach' ? 'ACH Transfer' : method === 'wire' ? 'Wire Transfer' : 'Credit Card'}</span>
                </label>
              ))}
            </div>
            <div className="flex gap-4 mt-6">
              <button
                onClick={() => setStep(1)}
                className="flex-1 bg-gray-200 text-gray-800 py-3 px-4 rounded-md hover:bg-gray-300 transition-colors"
              >
                Back
              </button>
              <button
                onClick={() => setStep(3)}
                className="flex-1 bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition-colors"
              >
                Continue
              </button>
            </div>
          </div>
        )}

        {/* Step 3: Confirm */}
        {step === 3 && (
          <div className="space-y-4">
            <h3 className="text-xl font-semibold mb-4 text-gray-800">Confirm Payment</h3>
            <div className="bg-gray-50 p-4 rounded">
              <p className="text-gray-600 mb-2">Payment Method: <span className="font-semibold capitalize">{paymentMethod}</span></p>
              <p className="text-sm text-gray-500">
                Click "Complete Payment" to finalize your subscription.
              </p>
            </div>
            <div className="flex gap-4 mt-6">
              <button
                onClick={() => setStep(2)}
                className="flex-1 bg-gray-200 text-gray-800 py-3 px-4 rounded-md hover:bg-gray-300 transition-colors"
              >
                Back
              </button>
              <button
                onClick={handlePayment}
                disabled={loading}
                className="flex-1 bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                {loading ? 'Processing...' : 'Complete Payment'}
              </button>
            </div>
          </div>
        )}

        {onCancel && (
          <button
            onClick={onCancel}
            className="mt-4 text-gray-600 hover:text-gray-800"
          >
            Cancel
          </button>
        )}
      </div>
    </div>
  );
};

export default CheckoutFlow;
