/**
 * @file OnboardingWizard.jsx
 * @description Main onboarding wizard component.
 */

window.OnboardingWizard = function OnboardingWizard() {
  const [step, setStep] = React.useState(1);
  const [formData, setFormData] = React.useState({
    companyAddress: {},
    redirectUris: [],
    allowedScopes: ['age_verification'],  // Required scopes always included
    ageRequirement: '18+',
    quotaTier: 'standard',
    billingCycle: 'yearly',
    enableWebhooks: true,  // Always enabled - webhook URL is auto-generated
    enableOnetimeVerification: false  // Account-based only by default
  });
  const [result, setResult] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const steps = [
    { num: 1, title: 'Company' },
    { num: 2, title: 'Contact' },
    { num: 3, title: 'Configuration' },
    { num: 4, title: 'OAuth' },
    { num: 5, title: 'Review' },
    { num: 6, title: 'Complete' }
  ];

  const handleSubmit = async () => {
    setSubmitting(true);
    setError(null);

    try {
      const response = await API.submitOnboarding(formData);
      setResult(response.data);
      setStep(6);
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  };

  const renderStep = () => {
    switch (step) {
      case 1:
        return (
          <CompanyInfoStep
            data={formData}
            onChange={setFormData}
            onNext={() => setStep(2)}
          />
        );
      case 2:
        return (
          <ContactInfoStep
            data={formData}
            onChange={setFormData}
            onNext={() => setStep(3)}
            onPrev={() => setStep(1)}
          />
        );
      case 3:
        return (
          <ConfigurationStep
            data={formData}
            onChange={setFormData}
            onNext={() => setStep(4)}
            onPrev={() => setStep(2)}
          />
        );
      case 4:
        return (
          <OAuthSettingsStep
            data={formData}
            onChange={setFormData}
            onNext={() => setStep(5)}
            onPrev={() => setStep(3)}
          />
        );
      case 5:
        return (
          <ReviewStep
            data={formData}
            onPrev={() => setStep(4)}
            onSubmit={handleSubmit}
            submitting={submitting}
          />
        );
      case 6:
        return <ResultStep result={result} />;
      default:
        return null;
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="max-w-3xl mx-auto px-4">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Partner Onboarding</h1>
          <p className="text-gray-600 mt-2">v0uch.me Verification Platform</p>
        </div>

        {step < 6 && (
          <div className="mb-8">
            <div className="flex items-center justify-between">
              {steps.slice(0, 5).map((s, i) => (
                <React.Fragment key={s.num}>
                  <div className="flex flex-col items-center">
                    <div
                      className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium step-indicator ${
                        step > s.num ? 'completed' : step === s.num ? 'active' : 'pending'
                      }`}
                    >
                      {step > s.num ? (
                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                        </svg>
                      ) : (
                        s.num
                      )}
                    </div>
                    <span className={`mt-2 text-xs font-medium ${
                      step >= s.num ? 'text-gray-900' : 'text-gray-400'
                    }`}>
                      {s.title}
                    </span>
                  </div>
                  {i < 4 && (
                    <div className={`flex-1 h-0.5 mx-2 ${
                      step > s.num ? 'bg-green-500' : 'bg-gray-200'
                    }`} />
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        )}

        {error && (
          <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
            <div className="flex items-center">
              <svg className="w-5 h-5 text-red-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span className="text-red-700">{error}</span>
            </div>
          </div>
        )}

        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
          {renderStep()}
        </div>

        <p className="text-center text-gray-500 text-sm mt-8">
          Need help?{' '}
          <a href="https://docs.v0uch.me/partners" className="text-blue-600 hover:underline">
            View documentation
          </a>{' '}
          or{' '}
          <a href="mailto:partners@v0uch.me" className="text-blue-600 hover:underline">
            contact support
          </a>
        </p>
      </div>
    </div>
  );
};