import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, DollarSign, CreditCard, Heart } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface TipStreamerModalProps {
  streamerName: string;
  onClose: () => void;
  onSend: (amount: number, message: string) => void;
}

export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
  streamerName,
  onClose,
  onSend,
}) => {
  const { addToast } = useToast();
  const [amount, setAmount] = useState('5');
  const [message, setMessage] = useState('');
  const [paymentMethod, setPaymentMethod] = useState('card');

  const presetAmounts = ['2', '5', '10', '20', '50'];

  const handleSubmit = () => {
    const val = parseFloat(amount);
    if (isNaN(val) || val <= 0) {
      addToast('Please enter a valid amount', 'error');
      return;
    }
    onSend(val, message);
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-gold rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
        <div className="p-4 border-b border-kodo-gold/30 bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-kodo-gold flex items-center gap-2">
            <DollarSign className="w-5 h-5" /> Support {streamerName}
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-gray-400 hover:text-white" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          {/* Amount Selection */}
          <div>
            <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
              Select Amount
            </label>
            <div className="flex gap-2 mb-3">
              {presetAmounts.map((val) => (
                <button
                  key={val}
                  onClick={() => setAmount(val)}
                  className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-kodo-gold text-black border-kodo-gold' : 'bg-kodo-void border-kodo-steel text-gray-400 hover:text-white'}`}
                >
                  ${val}
                </button>
              ))}
            </div>
            <div className="relative">
              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 font-bold">
                $
              </span>
              <input
                type="number"
                className="w-full bg-kodo-ink border border-kodo-steel rounded pl-8 pr-4 py-2 text-white font-mono focus:border-kodo-gold outline-none"
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
                placeholder="Custom Amount"
              />
            </div>
          </div>

          {/* Message */}
          <div>
            <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
              Message (Optional)
            </label>
            <textarea
              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-gold outline-none text-sm resize-none h-24"
              placeholder={`Say something nice to ${streamerName}...`}
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              maxLength={200}
            />
            <p className="text-right text-xs text-gray-500 mt-1">
              {message.length}/200
            </p>
          </div>

          {/* Payment Method (Mock) */}
          <div>
            <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
              Payment Method
            </label>
            <div className="flex gap-2">
              <button
                onClick={() => setPaymentMethod('card')}
                className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'card' ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-void border-kodo-steel text-gray-400'}`}
              >
                <CreditCard className="w-4 h-4" /> Card
              </button>
              <button
                onClick={() => setPaymentMethod('crypto')}
                className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'crypto' ? 'bg-kodo-magenta/10 border-kodo-magenta text-kodo-magenta' : 'bg-kodo-void border-kodo-steel text-gray-400'}`}
              >
                <span className="font-bold">Ξ</span> Crypto
              </button>
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-kodo-gold/30 bg-kodo-ink flex justify-end gap-3">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button
            variant="gaming"
            className="border-kodo-gold text-kodo-gold hover:bg-kodo-gold/10"
            onClick={handleSubmit}
          >
            <Heart className="w-4 h-4 mr-2" /> Send Tip
          </Button>
        </div>
      </div>
    </div>
  );
};
