import { useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { QRCodeSVG } from 'qrcode.react';
import { encode, PaymentOptions, CurrencyCode } from 'bysquare/pay';

const IBAN = 'SK2583300000002803542822';
const AMOUNTS = [1, 2, 5];
const PAYMENT_NOTE = 'Bridzik';
const BENEFICIARY = 'Liptak Timotej';

export default function Donate() {
  const navigate = useNavigate();
  const [amount, setAmount] = useState(2);
  const [custom, setCustom] = useState('');
  const [copied, setCopied] = useState(false);

  // Vlastna suma ma prednost pred presetom; akceptuje ciarku aj bodku.
  const customParsed = parseFloat(custom.replace(',', '.'));
  const customValid = custom !== '' && !isNaN(customParsed) && customParsed > 0;
  const effectiveAmount = customValid ? Math.round(customParsed * 100) / 100 : amount;

  const qrValue = useMemo(
    () =>
      encode({
        payments: [
          {
            type: PaymentOptions.PaymentOrder,
            amount: effectiveAmount,
            currencyCode: CurrencyCode.EUR,
            paymentNote: PAYMENT_NOTE,
            beneficiary: { name: BENEFICIARY },
            bankAccounts: [{ iban: IBAN }],
          },
        ],
      }),
    [effectiveAmount],
  );

  const copyIban = async () => {
    await navigator.clipboard.writeText(IBAN);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="max-w-md mx-auto p-4 pt-8 min-h-screen">
      <div className="flex items-center justify-between mb-6">
        <h1 className="font-serif text-2xl text-gold">Podpor Bridžik ☕</h1>
        <button onClick={() => navigate('/')} className="text-sm text-green-dim hover:text-gold">
          Späť
        </button>
      </div>

      <div className="bg-header border border-[#142018] rounded-2xl p-6 text-sm text-green-score">
        <p className="text-green-dim mb-4">
          Bridžik je zadarmo. Ak sa ti hra páči, dobrovoľný príspevok pomôže s prevádzkou servera a rozvojom nových funkcionalít.
        </p>

        <div className="flex gap-2 mb-2">
          {AMOUNTS.map((a) => (
            <button
              key={a}
              onClick={() => {
                setAmount(a);
                setCustom('');
              }}
              className={`flex-1 py-1.5 rounded-lg font-serif font-semibold transition-colors ${
                !customValid && amount === a
                  ? 'bg-gold text-table'
                  : 'border border-gold/40 text-gold hover:bg-gold/10'
              }`}
            >
              {a} €
            </button>
          ))}
        </div>

        <div
          className={`flex items-center gap-2 rounded-lg border px-3 py-1.5 mb-4 transition-colors ${
            customValid ? 'border-gold bg-gold/10' : 'border-gold/40'
          }`}
        >
          <input
            type="text"
            inputMode="decimal"
            placeholder="Vlastná suma"
            value={custom}
            onChange={(e) => setCustom(e.target.value)}
            className="flex-1 bg-transparent outline-none text-gold placeholder-green-dim font-serif font-semibold"
          />
          <span className="text-gold font-serif font-semibold">€</span>
        </div>

        <div className="bg-white rounded-xl p-4 flex justify-center mb-2">
          <QRCodeSVG value={qrValue} size={176} />
        </div>
        <p className="text-center text-xs text-green-dim mb-4">
          Naskenuj QR kód bankovou aplikáciou (PAY by square)
        </p>

        <div className="flex items-center justify-between gap-2 border border-gold/20 rounded-lg px-3 py-2">
          <span className="font-mono text-xs break-all">{IBAN}</span>
          <button
            onClick={copyIban}
            className="shrink-0 text-gold hover:text-gold-bright text-xs font-semibold"
          >
            {copied ? 'Skopírované ✓' : 'Kopírovať'}
          </button>
        </div>
      </div>
    </div>
  );
}
