import { QRCodeSVG } from 'qrcode.react';
import Card from '@/components/ui/Card';
import { BoltIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
import { copyInvoiceToClipboard, truncateInvoice } from '../_logic/booking';
import type { LightningInvoice } from '../_types';

interface PayingStepProps {
  invoice: LightningInvoice;
  qrCode: string;
  locale: string;
}

export function PayingStep({ invoice, qrCode, locale }: PayingStepProps) {
  return (
    <div className="section-padding">
      <div className="container-page max-w-md">
        <Card className="p-6 text-center">
          {/* Amount - prominent at top */}
          <div className="mb-4">
            {invoice.fiatAmount && invoice.fiatCurrency && (
              <p className="text-2xl font-bold text-primary-dark">
                {invoice.fiatAmount.toLocaleString()} {invoice.fiatCurrency}
              </p>
            )}
            <p className="text-orange-600 font-medium">
              ≈ {invoice.amount.toLocaleString()} sats
            </p>
          </div>

          {/* QR Code - clickable to copy */}
          <div
            className="bg-white p-4 rounded-lg shadow-inner inline-block mb-4 cursor-pointer hover:shadow-md transition-shadow"
            onClick={() => copyInvoiceToClipboard(invoice.paymentRequest, locale)}
            title={locale === 'es' ? 'Clic para copiar' : 'Click to copy'}
          >
            <QRCodeSVG
              value={invoice.paymentRequest.toUpperCase()}
              size={200}
              level="M"
              includeMargin={false}
            />
          </div>

          {/* Invoice string - truncated, clickable */}
          <div
            className="bg-secondary-gray rounded-lg p-3 mb-4 cursor-pointer hover:bg-gray-200 transition-colors"
            onClick={() => copyInvoiceToClipboard(invoice.paymentRequest, locale)}
          >
            <p className="font-mono text-xs text-gray-600 flex items-center justify-center gap-2">
              <ClipboardDocumentIcon className="w-4 h-4 flex-shrink-0" />
              <span className="truncate">{truncateInvoice(invoice.paymentRequest, 16)}</span>
            </p>
            <p className="text-xs text-gray-400 mt-1">
              {locale === 'es' ? 'Toca para copiar' : 'Tap to copy'}
            </p>
          </div>

          {/* Open in Wallet - primary action */}
          <a
            href={`lightning:${invoice.paymentRequest}`}
            className="inline-flex items-center justify-center gap-2 w-full px-6 py-3 bg-orange-500 text-white rounded-btn hover:bg-orange-600 transition-colors font-medium mb-4"
          >
            <BoltIcon className="w-5 h-5" />
            {locale === 'es' ? 'Abrir en Billetera' : 'Open in Wallet'}
          </a>

          {/* Status indicator */}
          <div className="flex items-center justify-center gap-2 text-gray-500 text-sm">
            <div className="animate-spin w-3 h-3 border-2 border-orange-400 border-t-transparent rounded-full" />
            <span>{locale === 'es' ? 'Esperando pago...' : 'Waiting for payment...'}</span>
          </div>

          {/* Ticket reference - small */}
          <p className="text-xs text-gray-400 mt-3">
            {locale === 'es' ? 'Ref' : 'Ref'}: {qrCode}
          </p>
        </Card>
      </div>
    </div>
  );
}
