import React, { useState, useEffect } from 'react';

interface AccountStatus {
  account_status: string;
  stripe_onboarding_status: string;
  can_start_onboarding: boolean;
  details_submitted: boolean;
  charges_enabled: boolean;
  payouts_enabled: boolean;
}

const AccountStatusBanner: React.FC = () => {
  const [status, setStatus] = useState<AccountStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    checkAccountStatus();
  }, []);

  const checkAccountStatus = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/stripe/account-status');
      
      if (!response.ok) {
        throw new Error('Failed to check account status');
      }

      const data = await response.json();
      setStatus(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <div className="flex items-center">
          <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 mr-3"></div>
          <span className="text-blue-800">Checking account status...</span>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <svg className="w-5 h-5 text-red-600 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
            </svg>
            <span className="text-red-800">Error checking account status: {error}</span>
          </div>
          <button
            onClick={checkAccountStatus}
            className="text-red-600 hover:text-red-800 font-medium text-sm"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  if (!status) return null;

  // Account pending approval
  if (status.account_status === 'pending_approval') {
    return (
      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-6">
        <div className="flex items-start">
          <svg className="w-6 h-6 text-yellow-600 mt-1 mr-4" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
          </svg>
          <div className="flex-1">
            <h3 className="text-lg font-semibold text-yellow-800 mb-2">Application Under Review</h3>
            <p className="text-yellow-700 mb-4">
              Your organization application is being reviewed by our team. This typically takes 1-2 business days.
            </p>
            <div className="bg-yellow-100 rounded-lg p-3">
              <h4 className="font-medium text-yellow-800 mb-2">While you wait, you can:</h4>
              <ul className="text-sm text-yellow-700 space-y-1">
                <li>• Explore our platform features and documentation</li>
                <li>• Plan your events and ticket types</li>
                <li>• Review our pricing and fee structure</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Account approved but Stripe onboarding needed
  if (status.account_status === 'approved' && status.stripe_onboarding_status !== 'completed') {
    return (
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
        <div className="flex items-start justify-between">
          <div className="flex items-start">
            <svg className="w-6 h-6 text-blue-600 mt-1 mr-4" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
            </svg>
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-blue-800 mb-2">🎉 Account Approved!</h3>
              <p className="text-blue-700 mb-4">
                Congratulations! Your organization has been approved. Complete the secure payment setup to start accepting ticket payments.
              </p>
              <div className="bg-blue-100 rounded-lg p-3 mb-4">
                <h4 className="font-medium text-blue-800 mb-2">🔒 Secure Payment Setup</h4>
                <p className="text-sm text-blue-700">
                  Our payment setup uses bank-level encryption through Stripe Connect. Your sensitive information is never stored on our servers.
                </p>
              </div>
            </div>
          </div>
          <a
            href="/onboarding/stripe"
            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors ml-4"
          >
            Complete Setup →
          </a>
        </div>
      </div>
    );
  }

  // Stripe onboarding in progress
  if (status.stripe_onboarding_status === 'in_progress' || status.stripe_onboarding_status === 'pending_review') {
    return (
      <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-6 mb-6">
        <div className="flex items-start justify-between">
          <div className="flex items-start">
            <svg className="w-6 h-6 text-indigo-600 mt-1 mr-4" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
            </svg>
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-indigo-800 mb-2">Payment Setup In Progress</h3>
              <p className="text-indigo-700 mb-3">
                {status.details_submitted 
                  ? 'Your payment information is being reviewed by Stripe. This usually takes a few minutes.'
                  : 'Continue your secure payment setup to start accepting payments.'
                }
              </p>
              {status.details_submitted && (
                <div className="bg-indigo-100 rounded-lg p-3">
                  <div className="flex items-center space-x-4 text-sm">
                    <div className="flex items-center">
                      <span className={`w-2 h-2 rounded-full mr-2 ${status.details_submitted ? 'bg-green-500' : 'bg-gray-300'}`}></span>
                      <span className="text-indigo-700">Information Submitted</span>
                    </div>
                    <div className="flex items-center">
                      <span className={`w-2 h-2 rounded-full mr-2 ${status.charges_enabled ? 'bg-green-500' : 'bg-yellow-500'}`}></span>
                      <span className="text-indigo-700">Payment Processing</span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
          {!status.details_submitted && (
            <a
              href="/onboarding/stripe"
              className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors ml-4"
            >
              Continue Setup →
            </a>
          )}
        </div>
      </div>
    );
  }

  // Fully active account
  if (status.account_status === 'active' && status.charges_enabled) {
    return (
      <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
        <div className="flex items-center">
          <svg className="w-5 h-5 text-green-600 mr-3" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
          </svg>
          <div className="flex-1">
            <h3 className="font-semibold text-green-800">Account Active</h3>
            <p className="text-sm text-green-700">Your account is fully set up and ready to accept payments.</p>
          </div>
        </div>
      </div>
    );
  }

  return null;
};

export default AccountStatusBanner;