import React from "react";

interface EarningsStatusProps {
  hasStripeAccount: boolean;
  isOnboardingComplete?: boolean;
  payoutsEnabled?: boolean;
  onSetupClick: () => void;
}

const EarningsStatus: React.FC<EarningsStatusProps> = ({
  hasStripeAccount,
  isOnboardingComplete = false,
  payoutsEnabled = true,
  onSetupClick,
}) => {
  // No Stripe account exists
  if (!hasStripeAccount) {
    return (
      <div className="text-center">
        <div className="mb-3">
          <i
            className="bi bi-exclamation-circle text-warning"
            style={{ fontSize: "2.5rem" }}
          ></i>
        </div>
        <h6>Earnings Not Set Up</h6>
        <p className="text-muted small mb-3">
          Set up earnings to automatically receive payments when rentals are
          completed.
        </p>
        <button className="btn btn-primary" onClick={onSetupClick}>
          Set Up Earnings
        </button>
      </div>
    );
  }

  // Account exists but onboarding incomplete
  if (!isOnboardingComplete) {
    return (
      <div className="text-center">
        <div className="mb-3">
          <i
            className="bi bi-clock-history text-warning"
            style={{ fontSize: "2.5rem" }}
          ></i>
        </div>
        <h6 className="text-warning">Setup Incomplete</h6>
        <p className="text-muted small mb-3">
          Your earnings account was created but setup is not complete. Please
          finish the onboarding process to start receiving payments.
        </p>
        <button className="btn btn-warning" onClick={onSetupClick}>
          Continue Setup
        </button>
      </div>
    );
  }

  // Account exists, onboarding complete, but payouts disabled
  if (!payoutsEnabled) {
    return (
      <div className="text-center">
        <div className="mb-3">
          <i
            className="bi bi-exclamation-triangle text-danger"
            style={{ fontSize: "2.5rem" }}
          ></i>
        </div>
        <h6 className="text-danger">Action Required</h6>
        <p className="text-muted small mb-3">
          Additional verification is needed to continue receiving payouts.
          Please complete the required steps to resume your earnings.
        </p>
        <button className="btn btn-danger" onClick={onSetupClick}>
          Complete Verification
        </button>
      </div>
    );
  }

  // Account exists and is fully set up with payouts enabled
  return (
    <div className="text-center">
      <div className="mb-3">
        <i
          className="bi bi-check-circle text-success"
          style={{ fontSize: "2.5rem" }}
        ></i>
      </div>
      <h6 className="text-success">Earnings Active</h6>
      <p className="text-muted small mb-3">
        Payouts are sent immediately when rentals complete. Funds reach your
        bank in 2-7 business days.
      </p>

      <div className="small text-start">
        <div className="d-flex justify-content-between mb-1">
          <span>Earnings Enabled:</span>
          <span className="text-success">
            <i className="bi bi-check"></i> Yes
          </span>
        </div>
        <div className="d-flex justify-content-between">
          <span>Status:</span>
          <span className="text-success">
            <i className="bi bi-check"></i> Active
          </span>
        </div>
      </div>

      <hr />

      <button
        className="btn btn-outline-primary btn-sm"
        onClick={() => window.open("https://dashboard.stripe.com", "_blank")}
      >
        <i className="bi bi-box-arrow-up-right"></i> Stripe Dashboard
      </button>
    </div>
  );
};

export default EarningsStatus;
