'use client';

import { useBalance } from '@/lib/queries/use-balance';

interface Props {
  storeId: string;
}

const STRIPE_ONBOARDING_URL =
  'https://dashboard.stripe.com/test/account/onboarding';

/**
 * Surfaces a persistent (non-dismissible) banner when the seller's Stripe
 * Connect account is unable to receive payouts. Data is sourced from the
 * existing balance query — Phase H extended `SellerBalance` to include
 * `payouts_enabled` + `disabled_reason` so the banner reuses the same fetch
 * the balance widget already issues.
 *
 * The banner intentionally does not render anything while the query is
 * loading or has errored — falling back to silence is safer than flashing a
 * false-positive warning. Mount it above page content on `/seller` and
 * `/seller/payouts`.
 */
export function ConnectHealthBanner({ storeId }: Props) {
  const { data } = useBalance(storeId);
  const balance = data?.data;
  if (!balance) return null;
  if (balance.payouts_enabled) return null;

  return (
    <div
      data-testid="connect-health-banner"
      role="status"
      className="rounded-md border border-amber-300 bg-amber-50 p-4 text-sm text-amber-900"
    >
      <div className="flex items-start justify-between gap-4">
        <div>
          <p className="font-semibold">Your payouts are paused.</p>
          <p className="mt-1 text-amber-800">
            {balance.disabled_reason ??
              'Stripe needs more information before transfers can resume.'}
          </p>
        </div>
        <a
          href={STRIPE_ONBOARDING_URL}
          target="_blank"
          rel="noreferrer noopener"
          data-testid="connect-health-cta"
          className="shrink-0 rounded-md bg-amber-700 px-3 py-1.5 text-xs font-semibold text-white hover:bg-amber-800"
        >
          Complete onboarding in Stripe
        </a>
      </div>
    </div>
  );
}