/**
 * @file ReviewStep.jsx
 * @description Review step of the onboarding wizard.
 */

window.ReviewStep = function ReviewStep({ data, onPrev, onSubmit, submitting }) {
  const [termsAccepted, setTermsAccepted] = React.useState(false);

  const formatAddress = (addr) => {
    if (!addr) return 'N/A';
    return `${addr.street}, ${addr.city}, ${addr.state} ${addr.postalCode}, ${addr.country}`;
  };

  return (
    <div className="fade-in">
      <h2 className="text-2xl font-bold text-gray-900 mb-6">Review and Submit</h2>
      <p className="text-gray-600 mb-8">Please review your information before submitting.</p>

      <div className="space-y-6">
        <div className="bg-gray-50 rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Company Information</h3>
          <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <dt className="text-sm text-gray-500">Company Name</dt>
              <dd className="font-medium">{data.companyName}</dd>
            </div>
            {data.companyLegalName && (
              <div>
                <dt className="text-sm text-gray-500">Legal Name</dt>
                <dd className="font-medium">{data.companyLegalName}</dd>
              </div>
            )}
            <div>
              <dt className="text-sm text-gray-500">Website</dt>
              <dd className="font-medium">{data.companyWebsite}</dd>
            </div>
            <div className="md:col-span-2">
              <dt className="text-sm text-gray-500">Address</dt>
              <dd className="font-medium">{formatAddress(data.companyAddress)}</dd>
            </div>
          </dl>
        </div>

        <div className="bg-gray-50 rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Contact Information</h3>
          <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <dt className="text-sm text-gray-500">Contact Name</dt>
              <dd className="font-medium">{data.contactName}</dd>
            </div>
            <div>
              <dt className="text-sm text-gray-500">Contact Email</dt>
              <dd className="font-medium">{data.contactEmail}</dd>
            </div>
            {data.contactPhone && (
              <div>
                <dt className="text-sm text-gray-500">Phone</dt>
                <dd className="font-medium">{data.contactPhone}</dd>
              </div>
            )}
            {data.technicalContactEmail && (
              <div>
                <dt className="text-sm text-gray-500">Technical Contact</dt>
                <dd className="font-medium">{data.technicalContactEmail}</dd>
              </div>
            )}
          </dl>
        </div>

        <div className="bg-gray-50 rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Configuration</h3>
          <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <dt className="text-sm text-gray-500">Business Category</dt>
              <dd className="font-medium capitalize">{data.partnerCategoryType?.replace('_', ' ') || 'Not specified'}</dd>
            </div>
            <div>
              <dt className="text-sm text-gray-500">Age Requirement</dt>
              <dd className="font-medium">{data.ageRequirement}</dd>
            </div>
            <div>
              <dt className="text-sm text-gray-500">Service Tier</dt>
              <dd className="font-medium capitalize">{data.quotaTier}</dd>
            </div>
            <div>
              <dt className="text-sm text-gray-500">Billing Cycle</dt>
              <dd className="font-medium capitalize">{data.billingCycle} ({data.billingCycle === 'yearly' ? '1-year' : '1-month'} certificate)</dd>
            </div>
            <div>
              <dt className="text-sm text-gray-500">Verification Mode</dt>
              <dd className="font-medium">
                {data.enableOnetimeVerification ? (
                  <span className="inline-flex items-center gap-1.5">
                    <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                    Account-based and one-time
                  </span>
                ) : (
                  <span className="inline-flex items-center gap-1.5">
                    <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
                    Account-based only
                  </span>
                )}
              </dd>
              {data.enableOnetimeVerification && (
                <dd className="text-sm text-amber-700 mt-1">
                  One-time verifications billed at{' '}
                  {data.quotaTier === 'enterprise' ? '$0.75' : data.quotaTier === 'premium' ? '$1.00' : '$1.50'}
                  {' '}per verification
                </dd>
              )}
            </div>
            <div className="md:col-span-2">
              <dt className="text-sm text-gray-500 mb-2">Webhook URL (auto-generated)</dt>
              <dd>
                {data.webhookUrl ? (
                  <div className="font-mono text-sm bg-green-50 text-green-700 p-2 rounded border border-green-200 break-all">
                    {data.webhookUrl}
                  </div>
                ) : data.companyWebsite ? (
                  <div className="font-mono text-sm bg-green-50 text-green-700 p-2 rounded border border-green-200 break-all">
                    {(() => {
                      let baseUrl = data.companyWebsite;
                      if (!baseUrl.startsWith('http')) baseUrl = `https://${baseUrl}`;
                      return `${baseUrl.replace(/\/$/, '')}/webhooks/v0uchme`;
                    })()}
                  </div>
                ) : (
                  <span className="text-gray-400">Will be generated from company website</span>
                )}
              </dd>
            </div>
          </dl>
        </div>

        <div className="bg-gray-50 rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">OAuth Settings</h3>
          <dl className="space-y-4">
            <div>
              <dt className="text-sm text-gray-500 mb-2">Callback URL (auto-generated)</dt>
              <dd className="space-y-1">
                {data.companyWebsite && (
                  <div className="font-mono text-sm bg-green-50 text-green-700 p-2 rounded border border-green-200">
                    {(() => {
                      let baseUrl = data.companyWebsite;
                      if (!baseUrl.startsWith('http')) baseUrl = `https://${baseUrl}`;
                      return `${baseUrl.replace(/\/$/, '')}/auth/v0uchme/callback`;
                    })()}
                  </div>
                )}
              </dd>
            </div>
            {(data.redirectUris && data.redirectUris.length > 0) && (
              <div>
                <dt className="text-sm text-gray-500 mb-2">Additional Redirect URIs</dt>
                <dd className="space-y-1">
                  {data.redirectUris.map((uri, i) => (
                    <div key={i} className="font-mono text-sm bg-white p-2 rounded">{uri}</div>
                  ))}
                </dd>
              </div>
            )}
            <div>
              <dt className="text-sm text-gray-500 mb-2">Data Access Permissions (auto-configured)</dt>
              <dd className="space-y-3">
                <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                  <div className="flex items-center gap-2 text-sm text-green-800">
                    <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    <span>All available data scopes are automatically enabled for your application.</span>
                  </div>
                </div>
                <div>
                  <span className="text-xs font-medium text-gray-600">Included scopes ({(data.allowedScopes || []).length}):</span>
                  <div className="flex flex-wrap gap-1.5 mt-2">
                    {(data.allowedScopes || []).map(scope => {
                      const isRequired = scope === 'age_verification';
                      const isCategoryPrefs = scope.startsWith('prefs_');
                      return (
                        <span
                          key={scope}
                          className={`px-2 py-0.5 rounded text-xs font-mono ${
                            isRequired
                              ? 'bg-blue-100 text-blue-700'
                              : isCategoryPrefs
                                ? 'bg-purple-100 text-purple-700'
                                : 'bg-gray-100 text-gray-700'
                          }`}
                        >
                          {scope}
                        </span>
                      );
                    })}
                  </div>
                </div>
              </dd>
            </div>
          </dl>
        </div>

        {/* User Visibility Summary */}
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
          <div className="flex items-start">
            <svg className="w-5 h-5 text-amber-600 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
            <div>
              <p className="text-amber-800 font-medium text-sm">User Visibility Summary</p>
              <p className="text-amber-700 text-sm mt-1">
                The following information will be visible to users who interact with your service:
              </p>
              <ul className="text-amber-700 text-sm mt-2 list-disc list-inside space-y-1">
                <li><strong>Company Name:</strong> {data.companyName}</li>
                <li><strong>Website:</strong> {data.companyWebsite}</li>
                <li><strong>Address:</strong> {formatAddress(data.companyAddress)}</li>
                <li><strong>Contact Email:</strong> {data.contactEmail}</li>
              </ul>
              <p className="text-amber-600 text-xs mt-3">
                This information appears in OAuth consent screens, user consent history, and GDPR data exports.
                This transparency is required for GDPR compliance and helps users manage their data relationships.
              </p>
            </div>
          </div>
        </div>

        <div className="border-t pt-6">
          <label className="flex items-start cursor-pointer">
            <input
              type="checkbox"
              checked={termsAccepted}
              onChange={(e) => setTermsAccepted(e.target.checked)}
              className="mt-1 h-4 w-4 text-blue-600 rounded border-gray-300"
            />
            <span className="ml-3 text-sm text-gray-600">
              I agree to the{' '}
              <a href="https://v0uch.me/terms" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                Terms of Service
              </a>{' '}
              and{' '}
              <a href="https://v0uch.me/privacy" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                Privacy Policy
              </a>
              . I understand that I am responsible for securely storing the credentials provided after onboarding.
              I acknowledge that the company information above will be visible to users for GDPR compliance purposes.
            </span>
          </label>
        </div>
      </div>

      <div className="flex justify-between mt-8">
        <button
          onClick={onPrev}
          disabled={submitting}
          className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50"
        >
          Back
        </button>
        <button
          onClick={onSubmit}
          disabled={!termsAccepted || submitting}
          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center"
        >
          {submitting && (
            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full loading-spinner mr-2" />
          )}
          {submitting ? 'Submitting...' : 'Complete Registration'}
        </button>
      </div>
    </div>
  );
};