/**
 * QrScreen - full-screen large QR code for redemption (FDS §4.9).
 */

'use client';

import { useEffect, useState } from 'react';
import { useT } from '@/lib/i18n/react';
import type { Locale } from '@/lib/i18n';
import { interpolate } from '@/lib/i18n/interpolate';
import { HydratedIsland } from '@/components/HydratedIsland';
import { Button } from '@/components/ui/primitives/Button';
import { Icon } from '@/components/ui/icons/Icon';
import { IconButton } from '@/components/ui/primitives/IconButton';
import { QrCodeCard } from '@/components/ui/domain/QrCodeCard';
import { VoucherCardFan } from '@/components/ui/domain/VoucherCardFan';
import { CountdownTimer } from '@/components/ui/domain/CountdownTimer';
import { AppShell } from '@/components/ui/layout/AppShell';
import { TopBar } from '@/components/ui/layout/TopBar';
import { Breadcrumb } from '@/components/ui/layout/Breadcrumb';
import { removeWalletQrSnapshot, writeWalletQrSnapshot } from '@/lib/offline/offlineContinuity';

export interface QrScreenVoucher {
  voucherId: string;
  qrPngUrl: string | null;
  expiresAt?: string;
}

export interface QrScreenProps {
  purchaseId: string;
  qrUrl: string;
  /** Still-unredeemed units (qty>1 lines have >1) — one QR rendered per entry. */
  vouchers?: QrScreenVoucher[];
  dealTitle: string;
  businessName: string;
  expiresAt?: string;
  redeemed?: boolean;
  expired?: boolean;
  purchaseShortId?: string;
  onBack?: () => void;
  locale?: Locale;
}

export function QrScreen({ locale, ...props }: QrScreenProps) {
  return (
    <HydratedIsland locale={locale}>
      <QrScreenInner {...props} />
    </HydratedIsland>
  );
}

function QrScreenInner({
  purchaseId,
  qrUrl,
  vouchers = [],
  dealTitle,
  businessName,
  expiresAt,
  redeemed = false,
  expired: expiredProp = false,
  purchaseShortId,
  onBack,
}: Omit<QrScreenProps, 'locale'>) {
  const t = useT('qr_redeem');
  const tNav = useT('nav');
  const [countdownExpired, setCountdownExpired] = useState(false);

  const topBarTitle = dealTitle.trim() || t('title_fallback');
  const isExpired = expiredProp || countdownExpired;

  useEffect(() => {
    if (redeemed || isExpired) {
      removeWalletQrSnapshot(purchaseId);
      return;
    }
    if (!qrUrl) return;
    writeWalletQrSnapshot({
      purchaseId,
      dealTitle,
      businessName,
      purchaseShortId,
      qrPngUrl: qrUrl,
      expiresAt,
      vouchers,
      updatedAt: Date.now(),
    });
  }, [
    businessName,
    dealTitle,
    expiresAt,
    isExpired,
    purchaseId,
    purchaseShortId,
    qrUrl,
    redeemed,
    vouchers,
  ]);

  function handleBack() {
    if (onBack) {
      onBack();
    } else {
      window.location.href = `/purchases/${purchaseId}`;
    }
  }

  return (
    <AppShell
      mode="customer"
      topBar={
        <TopBar
          variant="customer"
          title={topBarTitle}
          startSlot={
            <IconButton variant="on-brand" size="md" aria-label={t('back')} onClick={handleBack}>
              <Icon name="ChevronRight" size="md" mirror />
            </IconButton>
          }
        />
      }
    >
      <div className="flex flex-col items-center justify-center gap-6 px-6 py-10">
        <Breadcrumb
          items={[
            { label: tNav('home'), href: '/' },
            { label: tNav('purchases'), href: '/purchases' },
            { label: dealTitle },
          ]}
          className="w-full"
        />

        <div className="w-full max-w-xs text-center">
          <p className="text-text-primary text-base font-semibold">{dealTitle}</p>
          <p className="text-text-secondary mt-1 text-sm">{businessName}</p>
        </div>

        {redeemed ? (
          <>
            <span
              className="bg-success-100 text-success-600 flex h-16 w-16 items-center justify-center rounded-full"
              aria-hidden="true"
            >
              <Icon name="Check" size="xl" />
            </span>
            <div className="text-center">
              <h1 className="text-text-primary text-lg font-bold">{t('redeemed_title')}</h1>
              <p className="text-text-secondary mt-2 text-sm">{t('redeemed_body')}</p>
            </div>
          </>
        ) : isExpired ? (
          <>
            <span
              className="bg-danger-100 text-danger-600 flex h-16 w-16 items-center justify-center rounded-full"
              aria-hidden="true"
            >
              <Icon name="Clock" size="xl" />
            </span>
            <div className="text-center">
              <h1 className="text-text-primary text-lg font-bold">{t('expired_heading')}</h1>
              <p className="text-text-secondary mt-2 text-sm">{t('expired_body')}</p>
            </div>
            <Button variant="primary" size="md" onClick={handleBack} className="w-full max-w-xs">
              {t('back')}
            </Button>
          </>
        ) : (
          <>
            <p className="text-text-secondary max-w-xs text-center text-sm">{t('instruction')}</p>
            {vouchers.length > 1 ? (
              <VoucherCardFan vouchers={vouchers} className="w-full max-w-sm" />
            ) : (
              <div className="relative w-full max-w-xs">
                <QrCodeCard qrPngUrl={qrUrl} expiryIso={expiresAt} className="w-full" />
              </div>
            )}
            {purchaseShortId && (
              <p className="text-text-muted max-w-xs text-center text-xs">
                {interpolate(t('scan_fallback'), { shortId: purchaseShortId })}
              </p>
            )}
            {expiresAt ? (
              <div className="flex flex-col items-center gap-2">
                <span className="text-text-secondary text-xs">{t('expiry_label')}</span>
                <CountdownTimer endIso={expiresAt} onExpire={() => setCountdownExpired(true)} />
              </div>
            ) : (
              <p className="text-text-secondary text-xs">{t('no_expiry')}</p>
            )}
          </>
        )}

        {!redeemed && !isExpired && (
          <Button
            variant="ghost"
            size="md"
            iconStart={<Icon name="ArrowRight" size="sm" mirror />}
            onClick={handleBack}
            className="w-full max-w-xs"
          >
            {t('back')}
          </Button>
        )}
      </div>
    </AppShell>
  );
}