import { useState, useMemo } from 'react';
import { useWalletStore } from '../store/wallet';
import { QRCode, createPaymentUri } from '../components/QRCode';

export default function ReceivePage() {
  const { address } = useWalletStore();
  const [copied, setCopied] = useState(false);
  const [requestAmount, setRequestAmount] = useState('');

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

  // Generate payment URI with optional amount
  const qrValue = useMemo(() => {
    if (!address) return '';
    return createPaymentUri(address, requestAmount ? { amount: requestAmount } : undefined);
  }, [address, requestAmount]);

  return (
    <div className="max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-6">Receive SYNOR</h1>

      <div className="card">
        {/* QR Code */}
        <div className="flex items-center justify-center mb-6">
          {address ? (
            <QRCode value={qrValue} size={200} />
          ) : (
            <div className="w-48 h-48 bg-slate-200 rounded flex items-center justify-center text-slate-500">
              <div className="text-center">
                <div className="text-4xl mb-2">?</div>
                <div className="text-sm">No wallet loaded</div>
              </div>
            </div>
          )}
        </div>

        {/* Address */}
        <div>
          <label className="block text-sm text-slate-400 mb-2">
            Your Address
          </label>
          <div className="flex gap-2">
            <input
              type="text"
              value={address || ''}
              readOnly
              className="input font-mono text-sm flex-1"
            />
            <button
              onClick={handleCopy}
              className={`btn ${copied ? 'btn-primary' : 'btn-secondary'} px-4`}
            >
              {copied ? '✓' : 'Copy'}
            </button>
          </div>
        </div>

        <div className="mt-6 p-3 bg-slate-900 rounded-lg text-sm text-slate-400">
          <p>
            Share this address to receive SYNOR. Only send SYNOR to this address -
            other cryptocurrencies will be lost.
          </p>
        </div>
      </div>

      {/* Request Payment */}
      <div className="card mt-6">
        <h2 className="text-lg font-semibold mb-4">Request Payment</h2>
        <div className="space-y-4">
          <div>
            <label className="block text-sm text-slate-400 mb-2">
              Amount (optional)
            </label>
            <div className="relative">
              <input
                type="number"
                value={requestAmount}
                onChange={(e) => setRequestAmount(e.target.value)}
                className="input pr-20"
                placeholder="0.00"
                step="0.00000001"
                min="0"
              />
              <span className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400">
                SYNOR
              </span>
            </div>
          </div>
          {requestAmount && parseFloat(requestAmount) > 0 && (
            <div className="p-3 bg-synor-900/30 border border-synor-700/50 rounded-lg">
              <p className="text-sm text-synor-300">
                QR code updated to request {requestAmount} SYNOR
              </p>
            </div>
          )}
          <button
            onClick={handleCopy}
            className="w-full btn btn-secondary"
            disabled={!address}
          >
            Copy Payment Link
          </button>
        </div>
      </div>
    </div>
  );
}
