import React, { useState } from 'react';
import { useApp } from '../context/AppContext';
import { ArrowLeft, CreditCard, ShieldAlert } from 'lucide-react';

export const WithdrawView: React.FC = () => {
  const { user, withdrawFunds, popView } = useApp();
  const [channel, setChannel] = useState<'bKash' | 'Nagad' | 'Rocket'>('bKash');
  const [number, setNumber] = useState('');
  const [amount, setAmount] = useState('');
  const [errorText, setErrorText] = useState('');

  const handleWithdrawSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorText('');

    const amt = Number(amount);
    if (!number || number.length < 11) {
      setErrorText('১১ ডিজিটের সঠিক মোবাইল ওয়ালেট নম্বর দিন!');
      return;
    }

    if (!amount || isNaN(amt) || amt <= 100) {
      setErrorText('৳ ১০০ টাকার নিচে উইথড্র দেওয়া সম্ভব নয়!');
      return;
    }

    if (user.winningBalance < amt) {
      setErrorText('আপনার উইনিং ব্যালেন্স অপর্যাপ্ত! আপনি সর্বোচ্চ ৳ ' + user.winningBalance + ' উইথড্র করতে পারবেন।');
      return;
    }

    const res = await withdrawFunds(channel, amt, number);
    if (res.success) {
      alert(`উইথড্র রিকোয়েস্ট জমা হয়েছে!\n\nপেমেন্ট চ্যানেল: ${channel}\nনম্বর: ${number}\nপরিমাণ: ৳ ${amt}\n\nআপনার কন্ট্রিবিউশনটি উইনিং ব্যালেন্স হতে কেটে নেওয়া হয়েছে। ২৪ ঘণ্টার মধ্যে পেমেন্ট প্রসেস হয়ে যাবে!`);
      popView();
    } else {
      setErrorText(res.error || 'একটি ত্রুটি ঘটেছে!');
    }
  };

  return (
    <div className="space-y-6 pb-28">
      {/* Header Back */}
      <div className="flex items-center gap-3 border-b border-slate-800 pb-3">
        <button onClick={popView} className="p-1 px-2.5 rounded-lg bg-slate-800/100 hover:bg-slate-700 text-slate-100">
          <ArrowLeft className="w-5 h-5 inline mr-1" />
          Back
        </button>
        <div>
          <h2 className="text-[#f8fafc] text-lg font-black tracking-tight leading-none">
            Withdrawal
          </h2>
          <span className="text-xs text-slate-400 font-bold uppercase font-mono">
            Receive Winnings
          </span>
        </div>
      </div>

      <form onSubmit={handleWithdrawSubmit} className="space-y-5">
        
        {/* Choose Payment Channel (Matching Screen Capture 10 in UI quality!) */}
        <div className="space-y-2">
          <label className="text-[10px] text-slate-400 font-black tracking-widest block font-mono uppercase">
            Choose your payment channel
          </label>
          <div className="grid grid-cols-3 gap-3">
            
            {/* bKash Icon Check */}
            <div 
              onClick={() => { setChannel('bKash'); setErrorText(''); }}
              className={`relative p-3.5 rounded-2xl cursor-pointer text-center border-2 transition-all flex flex-col items-center justify-center gap-2 ${
                channel === 'bKash' 
                  ? 'border-emerald-500 bg-emerald-500/5' 
                  : 'border-slate-850 bg-slate-900/60'
              }`}
            >
              <div className="w-11 h-11 rounded-xl bg-pink-500 flex items-center justify-center text-white font-serif font-black shadow-md border border-pink-400/30">
                bK
              </div>
              <span className="text-xs text-white font-extrabold font-sans">bKash</span>
              
              {channel === 'bKash' && (
                <div className="absolute top-2 right-2 w-4 h-4 bg-emerald-500 rounded-full flex items-center justify-center shadow">
                  <span className="text-slate-950 font-black text-[9px]">✓</span>
                </div>
              )}
            </div>

            {/* Nagad */}
            <div 
              onClick={() => { setChannel('Nagad'); setErrorText(''); }}
              className={`relative p-3.5 rounded-2xl cursor-pointer text-center border-2 transition-all flex flex-col items-center justify-center gap-2 ${
                channel === 'Nagad' 
                  ? 'border-emerald-500 bg-emerald-500/5' 
                  : 'border-slate-850 bg-slate-900/60'
              }`}
            >
              <div className="w-11 h-11 rounded-xl bg-orange-600 flex items-center justify-center text-white font-serif font-black shadow-md border border-orange-500/30">
                Nd
              </div>
              <span className="text-xs text-white font-extrabold font-sans">Nagad</span>
              
              {channel === 'Nagad' && (
                <div className="absolute top-2 right-2 w-4 h-4 bg-emerald-500 rounded-full flex items-center justify-center shadow">
                  <span className="text-slate-950 font-black text-[9px]">✓</span>
                </div>
              )}
            </div>

            {/* Rocket */}
            <div 
              onClick={() => { setChannel('Rocket'); setErrorText(''); }}
              className={`relative p-3.5 rounded-2xl cursor-pointer text-center border-2 transition-all flex flex-col items-center justify-center gap-2 ${
                channel === 'Rocket' 
                  ? 'border-emerald-500 bg-emerald-500/5' 
                  : 'border-slate-850 bg-slate-900/60'
              }`}
            >
              <div className="w-11 h-11 rounded-xl bg-purple-700 flex items-center justify-center text-white font-serif font-black shadow-md border border-purple-600/30">
                Rt
              </div>
              <span className="text-xs text-white font-extrabold font-sans">Rocket</span>
              
              {channel === 'Rocket' && (
                <div className="absolute top-2 right-2 w-4 h-4 bg-emerald-500 rounded-full flex items-center justify-center shadow">
                  <span className="text-slate-950 font-black text-[9px]">✓</span>
                </div>
              )}
            </div>

          </div>
        </div>

        {/* Inputs */}
        <div className="space-y-4 font-semibold text-xs text-slate-400">
          <div className="space-y-1">
            <label className="uppercase tracking-widest block font-mono">
              Enter your Wallet Number:
            </label>
            <input 
              type="tel" 
              value={number}
              onChange={(e) => { setNumber(e.target.value); setErrorText(''); }}
              placeholder="01XXXXXXXXX"
              required
              className="w-full bg-[#131b2e] border border-slate-700 rounded-xl px-4 py-3 text-white font-bold placeholder-slate-600 focus:outline-none focus:border-emerald-500"
            />
          </div>

          <div className="space-y-1">
            <label className="uppercase tracking-widest block font-mono">
              Amount
            </label>
            <input 
              type="number" 
              value={amount}
              onChange={(e) => { setAmount(e.target.value); setErrorText(''); }}
              placeholder="Min ৳ 100"
              required
              className="w-full bg-[#131b2e] border border-slate-700 rounded-xl px-4 py-3 text-white font-bold placeholder-slate-600 focus:outline-none focus:border-emerald-500"
            />
          </div>
        </div>

        {/* Dynamic Display of Current winning balance */}
        <div className="bg-slate-950 border border-slate-850 p-4 rounded-xl text-center">
          <span className="text-[10px] text-slate-500 font-bold block uppercase leading-none font-mono">
            Your Withdrawal Balance is:
          </span>
          <span className="text-[#facc15] font-black text-2xl tracking-tight block mt-1">
            ৳ {user.winningBalance}
          </span>
        </div>

        {/* Display form errors if any */}
        {errorText && (
          <div className="bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold rounded-lg p-3 text-center">
            ⚠️ {errorText}
          </div>
        )}

        {/* Large red withdraw button */}
        <button 
          type="submit"
          className="w-full bg-[#dc2626] hover:bg-red-700 text-white font-extrabold tracking-widest uppercase text-sm py-4 rounded-xl shadow-lg active:scale-95 transition-all"
        >
          WITHDRAW
        </button>

      </form>

      {/* Helpful Instructions box in Bengali matching screenshots */}
      <div className="bg-emerald-500/5 border border-emerald-500/10 rounded-2xl p-4 space-y-2 text-[11px] leading-relaxed font-bold text-emerald-400">
        <p>• Withdraw রিকোয়েস্ট পাঠানোর পর ২৪ ঘণ্টার মধ্যে আপনার টাকা প্রেরণ করা হবে।</p>
        <p>• আরো দ্রুত পেমেন্ট সার্ভিস পেতে QUICK সার্ভিস মেথড সিলেক্ট করুন (সাধারণত bKash সেন্ড মানি দ্রুত সম্পন্ন হয়)।</p>
      </div>

    </div>
  );
};
