import { useState } from 'react';
import { useWalletStore } from '../store/wallet';

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

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

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

      <div className="card">
        {/* QR Code placeholder */}
        <div className="bg-white p-6 rounded-lg mb-6 flex items-center justify-center">
          <div className="w-48 h-48 bg-slate-200 rounded flex items-center justify-center text-slate-500">
            {/* In production, render actual QR code */}
            <div className="text-center">
              <div className="text-6xl mb-2">◈</div>
              <div className="text-sm">QR Code</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 (optional feature) */}
      <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"
                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>
          <button className="w-full btn btn-secondary">
            Generate Payment Link
          </button>
        </div>
      </div>
    </div>
  );
}