'use client';

/**
 * Loyalty — points balance, tier progress, and the reward catalogue.
 *
 * ⛔ THE HOSTED WIDGET COMES FIRST. `getLoyaltyWidgetSession()` returns an
 * `embedUrl` that drops straight into an `<iframe src>`, and when it resolves
 * this panel renders that instead of the hand-built UI below. The hosted widget
 * is maintained by the platform: new loyalty features (badges, membership,
 * referrals) appear in it without anyone touching this file, and it cannot
 * drift out of step with the API. Reach for the hand-built panel only when you
 * need a look the widget cannot give you.
 *
 * The `embedUrl` carries a scoped ~15-minute session token, never the real
 * customerToken. It is minted on mount, so any navigation that remounts this
 * panel refreshes it; a page left open past the expiry shows the widget's own
 * expired state, and a reload fixes it.
 *
 * ⛔ THE HAND-BUILT PANEL BELOW IS THE FALLBACK, NOT DEAD CODE. The session call
 * fails on an older backend, on a network blip, and wherever the widget is not
 * provisioned. Everything from here down is what the shopper sees then, so it
 * has to keep working. Do not delete it because the widget renders on your
 * machine.
 *
 * ⛔ REDEEMING DOES NOT DISCOUNT ANYTHING BY ITSELF. `redeemLoyaltyReward()`
 * spends the points and mints a ONE-TIME COUPON CODE, which the shopper still
 * has to apply at checkout. If the panel says "redeemed!" and stops there, the
 * points are gone and the discount never happens — so the code is shown, kept
 * on screen, and copyable. Points are the shopper's money-equivalent and the
 * spend is not reversible from the storefront.
 *
 * ⛔ IT AUTO-HIDES, AND THAT IS THE POINT. `status.program` is null for a store
 * with no loyalty program, which is most stores on day one. Render nothing
 * then — never an empty "0 points" card, which reads as a broken feature rather
 * than an absent one. Build the panel anyway: the merchant turns the program on
 * from the dashboard without touching this code.
 *
 * ⛔ `pointsBalance` EXCLUDES PENDING POINTS — SO YOU MUST RENDER
 * `pendingPoints` TOO. Points from a recent order sit pending for a
 * merchant-set number of days (`program.pendingDays`) before they can be
 * spent, so a shopper who just bought something sees a balance that does not
 * include them. Showing only `pointsBalance` therefore answers "I just
 * ordered, where are my points?" with a bare 0, which reads as a broken
 * programme rather than a waiting period — the single most common support
 * question this panel gets. Show the pending line whenever `pendingPoints > 0`,
 * dated with `pendingPointsConfirmAt` (the night they actually confirm, not the
 * window's end). The balance copy still says "ready to spend" rather than
 * "earned", because that is precisely what distinguishes the two numbers.
 *
 * ⛔ A REWARD CAN BE VISIBLE AND UNREDEEMABLE. Two independent gates:
 * `pointsCost` above the balance, and `minTierLevel` above the shopper's tier.
 * Both are enforced server-side, so a button that ignores them produces a
 * failed call, not a discount. They are shown disabled with the reason instead
 * of hidden — a locked reward is the thing that makes the next tier worth
 * reaching.
 *
 * ⛔ `program.status` DRAFT / PAUSED both stop EARNING. An existing balance is
 * still spendable, so the panel keeps working; it just stops promising that the
 * next order adds anything.
 *
 * Requires a logged-in customer — the calls go through the BFF proxy, which
 * attaches the httpOnly cookie. Mount it inside the account page, never on a
 * public route.
 */

import { useEffect, useState } from 'react';
import type { LoyaltyStatus, LoyaltyReward } from 'brainerce';
import { getClient } from '@/core/lib/brainerce';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';

interface LoyaltyPanelProps {
  className?: string;
}

interface RedeemedCoupon {
  rewardId: string;
  couponCode: string;
}

export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
  const t = useTranslations('loyalty');
  const [status, setStatus] = useState<LoyaltyStatus | null>(null);
  const [rewards, setRewards] = useState<LoyaltyReward[]>([]);
  const [widgetUrl, setWidgetUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [redeemingId, setRedeemingId] = useState<string | null>(null);
  const [redeemed, setRedeemed] = useState<RedeemedCoupon | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      const client = getClient();
      // Settled, not all: a store with rewards configured and none active
      // still has a balance worth showing, and vice versa. The widget session
      // rides along in the same batch rather than a second round trip, and its
      // failure is the ordinary case on a backend that does not serve it,
      // which is exactly why `allSettled` and not `all`.
      const [statusResult, rewardsResult, widgetResult] = await Promise.allSettled([
        client.getLoyaltyStatus(),
        client.getAvailableRewards(),
        client.getLoyaltyWidgetSession(),
      ]);
      if (cancelled) return;
      if (statusResult.status === 'fulfilled') setStatus(statusResult.value);
      if (rewardsResult.status === 'fulfilled') setRewards(rewardsResult.value);
      if (widgetResult.status === 'fulfilled') setWidgetUrl(widgetResult.value.embedUrl);
      setLoading(false);
    }

    load();
    return () => {
      cancelled = true;
    };
  }, []);

  // No program on this store, or the status call failed: render nothing at all.
  // An empty card is worse than no card.
  //
  // ⛔ This guard stays FIRST, ahead of the widget branch below. A store with no
  // loyalty program must render nothing, not an iframe that loads a panel about
  // a program that does not exist.
  if (loading || !status?.program) return null;

  // The hosted widget, when the platform minted a session for it. Everything
  // below this branch is the fallback.
  if (widgetUrl) {
    return (
      <section className={cn('border-border rounded-lg border p-6', className)}>
        <h2 className="text-foreground text-lg font-semibold">{t('title')}</h2>
        <iframe
          src={widgetUrl}
          title={t('widgetTitle')}
          loading="lazy"
          className="mt-4 h-[420px] w-full rounded border-0"
        />
      </section>
    );
  }

  const pointsName = status.program.pointsName || t('pointsFallback');
  const earningPaused = status.program.status !== 'ACTIVE';
  const tierLevel = status.tier?.level ?? 0;

  async function redeem(reward: LoyaltyReward) {
    setRedeemingId(reward.id);
    setError(null);
    try {
      const result = await getClient().redeemLoyaltyReward(reward.id);
      setRedeemed({ rewardId: reward.id, couponCode: result.couponCode });
      // The server is the authority on the new balance — take it from the
      // response rather than subtracting pointsCost locally, which drifts the
      // moment a reward is repriced between load and redeem.
      setStatus((prev) => (prev ? { ...prev, pointsBalance: result.pointsBalance } : prev));
    } catch (err) {
      setError(err instanceof Error ? err.message : t('redeemError'));
    } finally {
      setRedeemingId(null);
    }
  }

  return (
    <section className={cn('border-border rounded-lg border p-6', className)}>
      <div className="flex flex-wrap items-baseline justify-between gap-2">
        <h2 className="text-foreground text-lg font-semibold">{t('title')}</h2>
        <p className="text-foreground text-2xl font-bold">
          {status.pointsBalance.toLocaleString()}{' '}
          <span className="text-muted-foreground text-sm font-normal">{pointsName}</span>
        </p>
      </div>
      <p className="text-muted-foreground mt-1 text-sm">
        {earningPaused ? t('earningPaused') : t('readyToSpend')}
      </p>

      {/* Points from a recent order live here, not in the balance above. Without
          this line a shopper who just bought something sees a 0 and no reason
          for it. Absent entirely at zero — an empty "0 pending" is noise. */}
      {status.pendingPoints > 0 && (
        <p className="text-muted-foreground mt-2 text-sm">
          {status.pendingPointsConfirmAt
            ? t('pendingWithDate', {
                points: status.pendingPoints.toLocaleString(),
                pointsName,
                date: new Date(status.pendingPointsConfirmAt).toLocaleDateString(undefined, {
                  day: 'numeric',
                  month: 'long',
                }),
              })
            : t('pending', {
                points: status.pendingPoints.toLocaleString(),
                pointsName,
              })}
        </p>
      )}

      {/* Tier progress. Rendered only when the store configured tiers — the
          whole block is absent otherwise, rather than a full bar with no name. */}
      {status.tier && (
        <div className="mt-5">
          <div className="flex items-baseline justify-between text-sm">
            <span className="text-foreground font-medium">{status.tier.name}</span>
            {status.nextTier && (
              // `pointsToNextTier` is named for points and is NOT always points:
              // it is whatever the next tier qualifies on, so a SPEND tier
              // reports a currency amount. Saying "points" over a spend
              // threshold tells the shopper to earn the wrong thing.
              <span className="text-muted-foreground">
                {t(
                  status.nextTier.qualificationType === 'SPEND'
                    ? 'toNextTierSpend'
                    : 'toNextTierPoints',
                  {
                    amount: (status.pointsToNextTier ?? 0).toLocaleString(),
                    pointsName,
                    tier: status.nextTier.name,
                  }
                )}
              </span>
            )}
          </div>
          <div className="bg-muted mt-2 h-2 w-full overflow-hidden rounded-full">
            <div
              className="bg-primary h-full rounded-full transition-[width]"
              style={{ width: `${Math.round(Math.min(1, status.progressToNextTier) * 100)}%` }}
            />
          </div>
        </div>
      )}

      {/* Rewards. An empty catalogue is a normal state — the merchant has not
          created any yet — so the list simply does not render. */}
      {rewards.length > 0 && (
        <div className="mt-6">
          <h3 className="text-foreground mb-3 text-sm font-semibold">{t('rewardsTitle')}</h3>
          <ul className="space-y-3">
            {rewards.map((reward) => {
              const tooExpensive = reward.pointsCost > status.pointsBalance;
              const tierLocked =
                reward.minTierLevel !== null && tierLevel < (reward.minTierLevel ?? 0);
              const justRedeemed = redeemed?.rewardId === reward.id;

              return (
                <li
                  key={reward.id}
                  className="border-border flex flex-wrap items-center justify-between gap-3 rounded border p-3"
                >
                  <div className="min-w-0">
                    <p className="text-foreground font-medium">{reward.name}</p>
                    {reward.description && (
                      <p className="text-muted-foreground text-sm">{reward.description}</p>
                    )}
                    <p className="text-muted-foreground mt-1 text-xs">
                      {t('pointsCost', {
                        points: reward.pointsCost.toLocaleString(),
                        pointsName,
                      })}
                      {tierLocked && ` · ${t('tierLocked')}`}
                    </p>
                  </div>

                  {justRedeemed ? (
                    // The code IS the reward. It stays on screen; the shopper
                    // has to carry it to checkout, and the points are already
                    // spent either way.
                    <div className="text-right">
                      <p className="text-muted-foreground text-xs">{t('yourCode')}</p>
                      <code className="bg-muted text-foreground rounded px-2 py-1 font-mono text-sm">
                        {redeemed.couponCode}
                      </code>
                      <p className="text-muted-foreground mt-1 text-xs">{t('applyAtCheckout')}</p>
                    </div>
                  ) : (
                    <button
                      type="button"
                      disabled={tooExpensive || tierLocked || redeemingId === reward.id}
                      onClick={() => redeem(reward)}
                      className="bg-primary text-primary-foreground rounded px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
                    >
                      {redeemingId === reward.id
                        ? t('redeeming')
                        : tooExpensive
                          ? t('notEnoughPoints')
                          : t('redeem')}
                    </button>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      )}

      {error && <p className="text-destructive mt-4 text-sm">{error}</p>}
    </section>
  );
}